El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos width y height que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.
Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.
Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad border.
Para establecer las propiedades de cada lado de forma individual, puedes utilizar:
Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente:
Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas:
- bordertopwidth (enUS)")
- bordertopstyle (enUS)")
- bordertopcolor
- borderrightwidth (enUS)")
- borderrightstyle (enUS)")
- borderrightcolor (enUS)")
- borderbottomwidth
- borderbottomstyle
- borderbottomcolor
- borderleftwidth (enUS)")
- borderleftstyle (enUS)")
- borderleftcolor
En el ejemplo siguiente, hemos utilizado varios ejemplos de la lista anterior para crear bordes. Juega con las diferentes propiedades para comprobar que entiendes cómo funcionan. Las páginas de MDN sobre las propiedades de los bordes te proporcionan información sobre los diferentes estilos entre los que puedes elegir para los bordes.