El borde es una de las propiedades fantásticas de CSS que se utiliza para especificar el límite del elemento. CSS permite a los desarrolladores agregar bordes alrededor del elemento con la ayuda del "borde" propiedad. Además, los usuarios pueden aplicar más de un borde alrededor del elemento con los mismos colores y diferentes colores usando ":antes" y ":después"Selectores CSS.

Este tutorial le enseñará a aplicar el doble borde con diferentes colores utilizando las propiedades de CSS.

Cómo aplicar el doble borde con diferentes colores en CSS?

Para aplicar el doble borde con diferentes colores, consulte las instrucciones dadas.

Paso 1: Insertar encabezado

Inicialmente, inserte una etiqueta de encabezado utilizando el "

" etiqueta. Esta etiqueta se usa para especificar el encabezado del nivel uno.

Paso 2: crear un contenedor Div

A continuación, cree un contenedor Div con la ayuda del "" etiqueta. Dentro de la etiqueta Div, agregue una clase "de dos bordes".

Paso 3: Agregar texto en el párrafo

Luego, utiliza el "

"Elemento y asignarlo una clase"borde". Después de eso, incruste el texto entre el "

Linuxhint Ltd UK

Linuxhint proporciona el contenido para varias categorías, incluidos Docker, HTML/CSS, Discord, PowerShell, Windows, GitHub y muchos más.

Se puede observar que el texto en el párrafo se ha agregado con éxito:

Paso 4: Elemento de acceso "div"

Ahora, acceda al contenedor "div" con la ayuda de la clase asignada ".de dos bordes".

Paso 5: agregue un solo borde

Para agregar un solo borde, aplique las propiedades dadas:

.Doble borden
Posición: relativo;
Color de fondo: RGB (59, 194, 247);
borde: 4px sólido RGB (255, 113, 113);
relleno: 1em;
margen: 0 auto;
Altura: 10em;
Ancho: 14em;

En el bloque de código dado:

• "posición"Especifica la posición del elemento. Por ejemplo, hemos establecido el "relativo"Posicione para colocarlo en relación con su posición normal.
• "color de fondo"Propiedad utilizada para establecer el color de los elementos desde la parte trasera.
• "borde"Se usa para asignar un límite alrededor del elemento.
• "relleno"Especifica un espacio alrededor del contenido del elemento.
• "margen"Asigna espacio en blanco alrededor del límite del elemento definido.
• "altura"Define la altura del elemento.
• "ancho"Especifica para establecer el tamaño de ancho del elemento.

Como resultado, el borde se agregará así:

Paso 6: Agregar doble borde

Ahora, acceda a la clase con la ayuda del nombre de la clase junto con el ":antes"Selector. Después de eso, aplique las siguientes propiedades:

.Double-border: antes
Antecedentes: ninguno;
borde: 4px sólido RGB (19, 18, 18);
contenido: "";
bloqueo de pantalla;
Posición: Absoluto;
Arriba: 5px;
Izquierda: 5px;
Derecha: 5px;
Abajo: 5px;

La descripción de las propiedades codificadas anteriormente es la siguiente:

• "bordeLa propiedad se utiliza aquí para insertar otro borde alrededor del elemento. Aquí el "RGB"El valor asigna un color diferente al borde.
• El "contenido"La propiedad se utiliza con el":antes" y ": AfteR ”pseudo-elementos para insertar los materiales creados.
• "mostrar"Determina cómo se ve un elemento.
• Aquí, "posición"Está configurado como"absoluto", Lo que significa que la posición es fija o absoluta.
• "arriba"La propiedad define la posición superior del elemento.
• "izquierda"Especifica la posición del elemento en el lado izquierdo.
• "bien"Se usa para especificar la posición correcta de un elemento.
• "abajo"Se usa para especificar la posición inferior de un elemento:

Se puede observar que hemos agregado con éxito el doble borde alrededor del elemento.

Conclusión

Para aplicar el doble borde con diferentes colores en CSS, primero, cree un contenedor DIV y asigne una clase de "doble borde". A continuación, acceda al elemento por clase y aplique las propiedades de CSS, que incluyen "borde","posición" como "relativo" y otros. Luego, nuevamente acceda al elemento por nombre de clase junto con el ":antes"Selector y aplique el"borde"Propiedad con el puesto como"absoluto". Esta publicación le ha enseñado el método para aplicar bordes dobles con diferentes colores en CSS.