Los desarrolladores pueden aplicar múltiples propiedades CSS para que sus páginas web sean más atractivas, como "altura" y "ancho"Propiedades para el tamaño de configuración", "texto alineado"Para ajustar el texto", "estilo de borde" y "radio fronterizo"Propiedades para configurar el borde alrededor del elemento. Además, puede agregar un borde de acuerdo con sus requisitos, como en un lado del elemento, solo para hacer que las cosas detrás de los objetos sean más visibles.

Esta publicación demostrará:

• • Método 1: Establezca el borde en un lado
  • Método 2: Establezca el borde por todos los lados con diferentes estilos

Método 1: Establezca el borde en un lado

En CSS, los usuarios pueden establecer el borde en un lado del elemento deseado. Para este propósito, el "zurra","fronterizo","fronterizo" y "bordeLas propiedades se utilizan para agregar bordes en el lado izquierdo, derecho, superior o inferior.

En esta sección, estableceremos específicamente el borde en el lado izquierdo del contenedor. Para hacerlo, siga las instrucciones mencionadas a continuación.

Paso 1: crear un contenedor Div

Primero, cree un contenedor Div con la ayuda del "" etiqueta. Inserte un "identificación"Atributo y asigne un nombre a la identificación.

Paso 2: Insertar encabezado

A continuación, utilice el "<H1>"Etiqueta para agregar un rumbo dentro del contenedor Div. Además, también puede usar otras etiquetas de encabezado de acuerdo con el requisito, como "<H1>" a "<H6>"Etiquetas:

Borde a un lado

Se puede ver que el contenedor se ha creado con éxito:

Paso 3: Access Container Div

Ahora, acceda al contenedor HTML div y accede al nombre de la clase. Para hacerlo, un selector de clases "#"Se usa con el nombre de la clase.

Paso 4: Inserte solo el borde en un lado

Después de acceder al contenedor DIV, aplique las propiedades CSS mencionadas a continuación:

#principal-div
Border-izquierda: 5px de rojo sólido;
Antecedentes: RGB (56, 239, 245);
margen: 20px 100px;
Ancho: 200px; Altura: 150px

Aquí:

• • "zurra es una propiedad en taquigrafía para establecer el ancho, el estilo y el color de la izquierda fronteriza.
  • "fondoSe utiliza la propiedad para ajustar el color de fondo del elemento.
  • "margen"Las propiedades colocan el espacio fuera del límite.
  • "ancho"Define el tamaño del ancho del elemento en un contenedor.

La imagen resultante muestra el borde con un solo lado:

Método 2: Establezca el borde por todos los lados con diferentes estilos

Para establecer el borde en todos los lados con diferentes colores, utilice el código HTML anterior. Luego, acceda al contenedor DIV con la ayuda del nombre de ID y el selector:

#principal-div
margen: 80px;
ancho de borde: 8px 2px 1px 10px;
Border-Radius: 50px;
estilo fronterizo: insertado sólido doble punteado;
Color de la frontera: RGB (40, 5, 235) RGB (238, 146, 9) RGB (255, 0, 242) RGB (19, 19, 18);

En el código proporcionado anteriormente:

• • "margen"Especifica el espacio en blanco fuera del elemento.
  • "ancho del borde"Establece el ancho con diferentes valores para cada lado. Por ejemplo, hemos agregado diferentes valores en píxeles.
  • "radio fronterizo"Se utiliza para hacer la curva redonda del borde.
  • "estilo de bordeLa propiedad se utiliza para establecer el estilo del borde. En este escenario, se establecen cuatro tipos diferentes de estilos para cada lado del borde.
  • "color del bordeSe utiliza la propiedad para asignar el color al borde. Aquí, el valor para cada lado se establece como un color diferente.

Como resultado, se aplicará el borde con diferentes estilos en cada lado:

En este artículo, ha aprendido diferentes formas de establecer el borde CSS en uno y varios lados.

Conclusión

Para colocar el borde en un lado solo, primero, cree un DIV usando el "" elemento. A continuación, acceda al contenedor Div y aplique las propiedades de CSS. Después de eso, use cualquier propiedad entre estos, incluido "zurra","fronterizo","fronterizo" y "borde"Para configurar el borde lateral. Además, los usuarios también pueden establecer el "ancho del borde","estilo de borde" y "color del borde"Por separado a cada lado de la frontera. Esta publicación explicó el método para establecer el borde CSS en un lado solo.