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 propiedad abreviada border cuando desee que los cuatro bordes de un elemento HTML sean iguales.
Por otro lado, también puede utilizar las propiedades abreviadas color de borde, estilo de borde y ancho de borde para que cada borde sea diferente/único. Cuando desee especificar el color del borde, utilizaremos color de borde, utilizaremos ancho de borde para determinar la anchura del borde y especificaremos si un borde será discontinuo, doble o sólido utilizando la propiedad estilo de borde.
También puede fijar bordes individuales utilizando propiedades como border-block-start y border-top
Un borde doble se produce cuando dos líneas paralelas rodean un elemento HTML. Las dos líneas están separadas por un hueco que puede dejarse transparente o rellenarse con una imagen o un color de fondo.
Por ejemplo, podemos tener un botón de registro/inicio de sesión rodeado por un doble borde.
¿Por qué doble borde?
- Separación: Puede utilizar un doble borde para aumentar la legibilidad y escaneabilidad 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 utilizar colores diferentes/contrastantes en los bordes dobles para que los distintos elementos resulten más atractivos visualmente.
- Mostrar jerarquía: Puede distinguir claramente entre los elementos importantes y los menos importantes de una página web utilizando dobles bordes.
- Facilitan la personalización: Puede crear diseños personalizados y únicos con la ayuda de los dobles bordes. Por ejemplo, puede cambiar el color o la anchura de cada línea.
- Énfasis: Utilizando la propiedad de doble borde, puede llamar la atención sobre enlaces o botones específicos de una página web.
Puede utilizar las siguientes formas de crear el doble borde en CSS.
Utilizando la propiedad border-style
La propiedad border-style establece el estilo de los cuatro bordes de un elemento. En este caso utilizamos la palabra clave double para establecer el estilo. Cuando utilizamos la palabra clave double, se crea un relleno automático entre los dos bordes.
A efectos de demostración, fijaremos la anchura del borde en 15px. También elegiremos que el color de nuestro borde sea rojo e indicaremos que el estilo del borde es doble.
Código HTML:
<!DOCTYPE html>
<html lang="es">
<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>Documento</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Propiedad Borde</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margen: 0;
box-sizing: border-box;
}
body{
mostrar: flex;
justify-content: flex-start;
separación: 25px;
relleno: 15px;
}
div{
anchura: 350px;
altura: 100px;
mostrar: flex;
flex-dirección: columna;
justify-content: center;
alinear-elementos: centro;
}
.box{
ancho del borde: 15px;
color del borde: rojo;
estilo del borde: doble;
}La salida será:
Uso de la función linear-gradient()
Esta función establece un degradado lineal como imagen de fondo. El resultado es una transición gradual entre dos colores a lo largo de una línea recta. Utilizamos la palabra clave to para marcar el punto de inicio de la línea de degradado. Si no se especifica el orden, el valor por defecto es hacia abajo.
El código siguiente da a nuestra caja una anchura de borde de 7px. A continuación, podemos especificar el degradado lineal en la propiedad de fondo de cada lado de la caja.
Código HTML:
<!DOCTYPE html>
<html lang="es">
<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>Documento</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>función gradiente lineal()</h2> </div> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margen: 0;
box-sizing: border-box;
}
body{
mostrar: flex;
justify-content: flex-start;
separación: 25px;
relleno: 15px;
}
div{
anchura: 350px;
altura: 350px;
mostrar: flex;
flex-dirección: columna;
justify-content: center;
alinear-elementos: centro;
}
.box{
borde: 7px solid rgb(36, 85, 7);
fondo: 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);
}El resultado será:
Uso de la propiedad Contorno
Un contorno es una línea dibujada fuera del borde de un elemento. Esto consigue el efecto de doble borde, y podemos utilizar un contorno y un borde simple. Debemos utilizar outline-offset para añadir un espacio entre las propiedades border y outline.
Código HTML:
<!DOCTYPE html>
<html lang="es">
<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>Documento</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Propiedad Outline</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margen: 0;
box-sizing: border-box;
}
body{
mostrar: flex;
justify-content: flex-start;
separación: 25px;
relleno: 15px;
}
div{
anchura: 350px;
altura: 100px;
mostrar: flex;
flex-dirección: columna;
justify-content: center;
alinear-elementos: centro;
}
.box{
borde: 5px solid red;
contorno: 5px azul sólido;
contorno-desplazamiento: -20px;
}La página renderizada tendrá el siguiente aspecto:
Uso de la propiedad box-shadow
La propiedad box-shadow añade un efecto de sombra alrededor del marco de un elemento. Puede tener varios efectos box-shadow separados por comas. Empiece por asegurarse de que los ajustes de desplazamiento y desenfoque son cero y, a continuación, ajuste las sombras a los tamaños adecuados.
HTML:
<!DOCTYPE html>
<html lang="es">
<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>Documento</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Propiedad sombra de la caja</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margen: 0;
box-sizing: border-box;
}
body{
mostrar: flex;
justify-content: flex-start;
separación: 25px;
relleno: 15px;
}
div{
anchura: 350px;
altura: 100px;
mostrar: flex;
flex-dirección: columna;
justify-content: center;
alinear-elementos: centro;
}
.box{
box-shadow:
0 0 0 5px rojo,
0 0 0 10px verde;
}La página renderizada tendrá el siguiente aspecto:
Uso de la propiedad background-clip
La propiedad background-clip determina hasta dónde debe extenderse el fondo dentro de un elemento. La extensión puede ser en el border-box, padding-box o content-box.
Código HTML:
<!DOCTYPE html>
<html lang="es">
<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>Documento</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Propiedad Background-Clip</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margen: 0;
box-sizing: border-box;
}
body{
mostrar: flex;
justify-content: flex-start;
separación: 25px;
relleno: 15px;
}
div{
anchura: 350px;
altura: 100px;
mostrar: flex;
flex-dirección: columna;
justify-content: center;
alinear-elementos: centro;
}
.box{
borde: 7px solid rgb(36, 85, 7);
relleno: 5px;
background-clip: content-box;
color de fondo: rgb(238, 152, 130);
}La página renderizada tendrá el siguiente aspecto:
Uso de pseudoelementos
Los pseudoelementos, representados por los selectores ::before y ::after permiten a los diseñadores web dar estilo a partes de un documento HTML sin añadir marcas al código.
Podemos ilustrar cómo utilizar pseudoelementos para crear un borde doble utilizando este código:
Documento HTML
<!DOCTYPE html>
<html lang="es">
<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>Documento</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>pseudopropiedad</h2> </div>
</body>
</html>CSS
*{
padding 0;
margen: 0;
box-sizing: border-box;
}
body{
mostrar: flex;
justify-content: flex-start;
separación: 25px;
relleno: 15px;
}
div{
anchura: 150px;
altura: 100px;
mostrar: flex;
flex-dirección: columna;
justify-content: center;
alinear-elementos: centro;
}
.box{
color de fondo: marrón;
}
box{
color de fondo: rebeccapurple;
posición: relativa;
borde: 8px sólido rojo;
}
.box::before{
contenido: " ";
posición: absoluta;
superior: 5px;
izquierda: 5px;
derecha: 5px;
abajo: 5px;
borde: 8px verde sólido;
ancho del borde: 6px;
color del borde: verde blanco
anchura: 150px;
altura: 100px;
}La página renderizada tendrá el siguiente aspecto:
Ejemplos reales de CSS de doble borde
La propiedad CSS de doble borde se utiliza en muchas páginas web. Debe combinar la propiedad de doble borde con otras propiedades CSS para sacarle el máximo partido. A continuación se muestran dos ejemplos del doble borde en acción;
El botón «Cesta» en Amazon
Amazon es uno de los grandes nombres del comercio electrónico. Su botón del carrito tiene un doble borde CSS por estética visual y para incitar a los usuarios a actuar.
Los bordes dobles aparecen cuando un usuario pasa el ratón por encima del botón «carrito». Los bordes también son visibles cuando se pasa el ratón por encima del 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 seguir 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 cuando los usuarios navegan por ellos.
El borde de la parte inferior de estos botones se hace más grueso a medida que el usuario pasa el cursor por ellos.
Mejores prácticas al utilizar el efecto CSS de doble borde
Es fácil dejarse llevar cuando se utiliza CSS doble. El objetivo final es garantizar que los usuarios naveguen con facilidad y destacar las áreas principales de su sitio. Siga estas prácticas recomendadas:
- Utilice un estilo coherente: Si utiliza bordes dobles, asegúrese de que el estilo es coherente en todos los elementos. Por ejemplo, puede utilizar bordes dobles en los botones de navegación, de llamada a la acción y de registro/inicio de sesión. Si es posible, asegúrese de que tiene los mismos colores y grosores de margen en todos los elementos con bordes dobles.
- Asegúrese de que estos bordes dobles funcionan en distintos dispositivos: Vivimos en un mundo en el que la gente navega por los sitios web desde teléfonos inteligentes, ordenadores y tabletas. Haga pruebas para asegurarse de que los bordes dobles se muestran como se espera en distintos tamaños de pantalla.
- Utilícelos con moderación: Puede verse tentado a utilizar en exceso un determinado efecto CSS tras descubrirlo por primera vez. Sin embargo, el doble CSS se adapta a varios elementos de una página web. Utilice esta propiedad sólo en las zonas en las que aporte valor añadido al diseño.
Conclusión
Hemos destacado los principales enfoques que puede utilizar para crear un borde doble en CSS. La elección del enfoque dependerá de lo que quiera conseguir con el doble borde y de sus preferencias. Puede decidir ceñirse a uno o a una combinación de varios estilos de doble borde en la misma página.
Puede consultar estos recursos CSS para comprender en detalle las hojas de estilo en cascada.