Los bordes son cruciales en el diseño/desarrollo web, ya que pueden llamar la atención de los usuarios o separar el contenido de una página web. Puede utilizar la abreviatura de borde cuando desee que los cuatro bordes de un elemento HTML sean iguales.
Por otro lado, también puede usar las propiedades manuales de color de borde, estilo de borde y ancho de borde para hacer que cada borde sea diferente/único. Cuando desea especificar el color del borde, usamos el color del borde, usamos el ancho del borde para determinar el ancho del borde y especificamos si un borde será discontinuo, doble o sólido usando la propiedad de estilo de borde.
También puede apuntar a bordes individuales usando propiedades como border-block-start y border-top
Un borde doble es cuando dos líneas paralelas rodean un elemento HTML. Las dos líneas están separadas por un espacio que se puede dejar transparente o rellenar con una imagen o un color de fondo.
Por ejemplo, podemos tener un botón de registro/inicio de sesión rodeado por un borde doble.
¿Por qué doble borde?
- Separación: Puede usar un borde doble para aumentar la legibilidad y la capacidad de escaneado de una página web separando diferentes elementos HTML. Por ejemplo, puede tener bordes dobles para separar elementos como encabezados, cuerpo y pies de página en una página web.
- Atractivo visual: Puede usar colores diferentes/contrastantes en los bordes dobles para hacer que los diferentes elementos sean más atractivos visualmente.
- Mostrar jerarquía: Puede distinguir claramente entre los elementos importantes y menos importantes en una página web utilizando bordes dobles.
- Fácil personalización: Puede crear diseños personalizados y únicos con la ayuda de bordes dobles. Por ejemplo, puede cambiar el color o el ancho de cada línea.
- Énfasis: Usando la propiedad de doble borde, puede llamar la atención sobre enlaces o botones específicos en una página web.
Puede usar las siguientes formas de crear el borde doble en CSS.
Using border-style Property
El border-style La propiedad establece el estilo de los cuatro bordes de un elemento. Usamos la palabra clave double para establecer el estilo en este caso. Cuando usamos la palabra clave doble, se crea un relleno automático entre los dos bordes.
Para fines de demostración, estableceremos el ancho del borde en 15 px. También elegiremos que el color de nuestro borde sea rojo e indicaremos el estilo del borde como doble.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2> Border Property</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}La salida será:
Using linear-gradient() function
Esta función establece un linear gradient como imagen de fondo. El resultado es una transición gradual entre dos colores a lo largo de una línea recta. Usamos la palabra clave to para marcar el punto de inicio de la línea de degradado. Si no se especifica el orden, el valor predeterminado es to bottom.
El siguiente código le da a nuestra caja un ancho de borde de 7px. Luego podemos especificar el degradado lineal en la propiedad de fondo de cada lado de la caja.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>linear-gradient() function</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}La salida será:
Using Outline Property
An outline es una línea dibujada fuera del borde de un elemento. Esto logra el efecto de doble borde, y podemos usar un contorno y un borde único. Debemos usar contorno-desplazamiento para agregar un espacio entre el borde y las propiedades del contorno.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Outline Property</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}La página renderizada aparecerá de la siguiente manera:
Using box-shadow Property
El box-shadow La propiedad agrega un efecto de sombra alrededor del marco de un elemento. Puede tener varios efectos de sombra de cuadro separados por comas. Comience asegurándose de que la configuración de compensación y desenfoque sea cero, y luego configure las sombras en los tamaños adecuados.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Box Shadow Property</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}La página renderizada aparecerá de la siguiente manera:
Using background-clip Property
El background-clip La propiedad determina hasta dónde debe extenderse el fondo dentro de un elemento. La extensión puede estar en el cuadro de borde, el cuadro de relleno o el cuadro de contenido.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Background-Clip Property</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}La página renderizada aparecerá de la siguiente manera:
Using Pseudo Elements
Pseudo-elementos, representados por ::before y ::after Los selectores permiten a los diseñadores web diseñar partes de un documento HTML sin agregar marcas al código.
Podemos ilustrar cómo usar pseudo-elementos para crear un borde doble usando este código:
Documento HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>pseudo property</h2> </div>
</body>
</html>CO
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}La página renderizada aparecerá de la siguiente manera:
Ejemplos del mundo real de CSS de doble borde
La propiedad CSS de doble borde se utiliza en muchos sitios web. Debe combinar la propiedad de doble borde con otras propiedades de CSS para sacarle el máximo partido. Los siguientes son dos ejemplos del borde doble en acción;
El botón “Carrito” en Amazon
Amazon es uno de los nombres más importantes en el espacio de comercio electrónico. Su botón de carrito tiene un CSS de borde doble para la estética visual y pide a los usuarios que actúen.
Los bordes dobles aparecen cuando un usuario pasa el cursor sobre el botón 'carrito'. Los bordes también son visibles cuando se desplaza sobre el menú de navegación de Amazon.
Botones de Mailchimp
MailChimp es un servicio de marketing por correo electrónico que permite a los usuarios crear, lanzar y realizar un seguimiento de las campañas. Su sitio web utiliza efectos de doble borde en varias secciones. Los botones de registro e inicio de sesión tienen bordes dobles para "crear" una sensación de urgencia a medida que los usuarios navegan.
El borde en la parte inferior de estos botones se vuelve más grueso cuando el usuario pasa el cursor por ellos.
Mejores prácticas al usar el efecto CSS de doble borde
Es fácil dejarse llevar cuando se utiliza doble CSS. El objetivo final es garantizar que los usuarios naveguen fácilmente y enfatizar las áreas principales de su sitio. Siga estas prácticas recomendadas:
- Usa un estilo consistente: Si usa bordes dobles, asegúrese de que el estilo sea consistente en todos los elementos. Por ejemplo, se pueden usar bordes dobles en los botones de navegación, llamada a la acción y registro/inicio de sesión. Si es posible, asegúrese de tener los mismos colores y grosores de margen en todos los elementos con bordes dobles.
- Asegúrese de que estos bordes dobles funcionen en diferentes dispositivos: Vivimos en un mundo en el que las personas navegan por sitios web desde teléfonos inteligentes, PC y tabletas. Pruebe para asegurarse de que los bordes dobles se muestren como se esperaba en varios tamaños de pantalla.
- Úsalos con moderación: Puede sentirse tentado a abusar de cierto efecto CSS después de descubrirlo por primera vez. Sin embargo, el doble CSS se adapta a varios elementos de una página web. Use esta propiedad solo en áreas donde agrega valor al diseño.
Para concluir
Hemos resaltado los principales enfoques que puede utilizar para crear un borde doble en CSS. La elección del enfoque dependerá de lo que desee lograr con el borde doble y sus preferencias. Puede decidir ceñirse a uno o a una combinación de varios estilos de doble borde en la misma página.
Puedes ver estos Recursos CSS para comprender las hojas de estilo en cascada en detalle.
