Bordes en CSS

Estilizando bordes en CSS

CSS ofrece la posibilidad de personalizar los bordes de cualquier elemento HTML. Es posible definir bordes uniformes para todos los lados o aplicar estilos distintos a cada uno: superior, inferior, derecho o izquierdo.

---

Propiedades fundamentales para los bordes

CSS proporciona varias propiedades para controlar la apariencia de los bordes. Estas son las más importantes:

Propiedad	Valores posibles	Descripción
border-width	thin, medium, thick o valores en unidades CSS	Define el grosor del borde.
border-style	none, solid, dotted, dashed, etc.	Establece el tipo de línea del borde.
border-color	Nombre de color o valor hexadecimal	Determina el color del borde.
border	Combinación de las anteriores	Es una propiedad abreviada para aplicar todas en una sola línea.

---

Usando border-width

La propiedad border-width permite asignar el grosor del borde. Se puede hacer usando palabras clave o cualquier unidad válida en CSS (px, em, etc.). Estas son las equivalencias de las palabras clave:

Palabra clave	Equivalencia aproximada
thin	1px
medium	3px
thick	5px

Nota: No se permiten valores negativos para los bordes.

---

Aplicar diferentes estilos a cada lado

CSS permite aplicar distintos valores a cada lado del borde mediante la repetición de parámetros. Según cuántos valores indiques, el comportamiento varía:

Cantidad de valores	Aplicación
1 valor	Se aplica igual a los cuatro lados.
2 valores	El primero al top y bottom, el segundo a left y right.
3 valores	El primero a top, el segundo a left y right, el tercero a bottom.
4 valores	Se aplican en orden: top, right, bottom, left.

Este patrón funciona igual para border-width, border-style y border-color.

Ejemplo:

cssCopiarEditar.element {
  border-color: red blue green;
  border-width: 2px 10px 5px;
  border-style: solid dotted solid;
}

En este caso, el borde superior será rojo, sólido y de 2px, los laterales serán azules, punteados y de 10px, y el borde inferior será verde, sólido y de 5px.

---

Propiedad abreviada: border

Para simplificar la escritura del código, puedes usar la propiedad resumida border, que combina grosor, estilo y color en una sola línea:

cssCopiarEditar.element {
  border: 1px solid #000;
}

Esto es equivalente a:

cssCopiarEditarborder-width: 1px;
border-style: solid;
border-color: #000;

Consejo: Siempre que puedas, utiliza propiedades abreviadas para reducir líneas de código y mantener tu CSS más limpio y legible. El orden de los valores en el shorthand suele ser: grosor → estilo → color.

---

Bordes específicos por lado

También puedes definir bordes independientes para cada lado utilizando propiedades como:

• border-top
• border-right
• border-bottom
• border-left

Además, puedes controlar individualmente el color, el grosor y el estilo de cada lado:

cssCopiarEditar.element {
  border: 2px solid red;
  border-bottom-width: 5px;
  border-bottom-style: dotted;
  border-bottom-color: black;
}

En este ejemplo, se aplica un borde general rojo, pero luego se personaliza el borde inferior con un estilo punteado, color negro y un grosor mayor. Es importante recordar que las propiedades específicas sobrescriben las generales si se declaran después en el código.

---

Consideraciones importantes

• El orden en que se aplican las propiedades importa: si defines primero un borde específico y luego usas border, el valor general puede anular el anterior.
• Organiza y agrupa tu código CSS para evitar confusiones y mantener una estructura lógica.