Un borde en CSS es una línea que delimita el contorno de una caja HTML y nos permite separarla visualmente del resto de elementos.
Ahora que ya sabemos aplicar colores y fondos, ha llegado el momento de dar estructura y jerarquía visual a nuestras páginas. Los bordes nos ayudan a marcar límites, agrupar información relacionada y crear un ritmo visual.
Pensad, por ejemplo, en una tarjeta de producto. Si no tienen ningún tipo de contorno que los separe de su contenedor, la interfaz parece plana y desorganizada. Al aplicar un borde sutil, el usuario entiende al instante que se trata de un bloque independiente.
Cómo se define un borde
Todo elemento HTML es una caja. Esa caja tiene un borde, aunque por defecto normalmente sea invisible. Para verlo, necesitamos definir tres cosas: grosor, estilo y color.
.caja-bordeada {
border-width: 2px;
border-style: solid;
border-color: #333333;
}
Como escribir tres líneas para algo tan común da un poco de pereza (y la pereza bien canalizada nos ha dado media informática moderna), CSS permite usar la propiedad abreviada border.
.caja-rapida {
/* grosor | estilo | color */
border: 2px solid #333333;
}
El orden habitual es ese, aunque CSS suele ser bastante tolerante. Aun así, mejor escribirlo siempre igual para que el código se lea rápido.
Estilos de borde
El estilo solid es el que más usaréis, porque crea una línea continua y limpia. Pero CSS incluye más opciones.
solid: Línea continua.dashed: Línea a trazos.dotted: Línea punteada.double: Dos líneas paralelas.none: Sin borde.
.aviso {
border: 2px dashed #f59e0b;
}
.nota {
border: 1px solid #dddddd;
}
Los bordes también son una herramienta muy apañada para depurar maquetación. Poner temporalmente border: 1px solid red; a un contenedor ayuda a ver hasta dónde llega realmente la caja (truquito muy viejo que hacemos todos durante le desarrollo 🤭).
Bordes por cada lado
No estamos obligados a poner el mismo borde en los cuatro lados. Podemos actuar sobre un lado concreto con border-top, border-right, border-bottom y border-left.
.destacado {
border-left: 4px solid #2563eb;
padding-left: 1rem;
}
.fila {
border-bottom: 1px solid #eeeeee;
}
Esto es muy usado en citas, avisos, listas o tablas. Muchas veces un borde completo encerrando todo queda demasiado duro, mientras que un solo borde lateral comunica separación sin hacer ruido (personalmente, no me gusta, pero para gustos…).
Redondear esquinas con border-radius
La propiedad border-radius permite redondear las esquinas de una caja. Es uno de esos detalles que parecen pequeños, pero cambian mucho la sensación de una interfaz.
.boton {
border-radius: 8px;
}
.tarjeta {
border: 1px solid #dddddd;
border-radius: 12px;
}
Si el valor es pequeño, obtenemos esquinas ligeramente suavizadas. Si es grande, el elemento se vuelve mucho más redondeado. Si la caja es cuadrada y usamos 50%, obtenemos un círculo.
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
El border-radius no convierte cualquier cosa en un círculo perfecto. Si el elemento no tiene el mismo ancho y alto, 50% creará una elipse.
También podemos controlar cada esquina por separado.
.mensaje {
border-radius: 12px 12px 12px 0;
}
Ese patrón se usa mucho en bocadillos de chat, donde una esquina queda más recta para indicar de dónde “sale” el mensaje.
outline no es lo mismo que border
Hay una propiedad parecida llamada outline. Se dibuja alrededor del elemento, pero no ocupa espacio dentro del modelo de caja.
.campo:focus-visible {
outline: 3px solid #facc15;
outline-offset: 3px;
}
Esto la hace ideal para estados de foco accesibles. El borde puede cambiar el tamaño visual de un elemento y mover cosas alrededor. El outline, en cambio, se dibuja por fuera sin alterar la distribución.
No eliminéis el foco visible de los elementos interactivos. Si cambiáis el estilo, perfecto. Si lo quitáis sin alternativa, estáis dejando a los usuarios de teclado sin brújula.
