Las propiedades del borde especifican el ancho, color y estilo del borde de una caja. Estas propiedades se aplican a todos los elementos.
Por tanto, las propiedades relacionadas con bordes sirven para especificar más detalles que las referidas a márgenes y a rellenos. De los bordes puede especificarse, además de la anchura, el color y el estilo. Por otra parte, lo más frecuente es que todos los bordes de un elemento tengan el mismo tamaño, color y estilo, aunque se permite que sean distintos.
Cada una de las características puede definirse de modo individual o agrupado. Esto hace que existan varias propiedades para indicar los bordes:
Los estilos de bordes se pueden usar en las propiedades individuales border-top-style, border-right-style, border-bottom-style y border-left-style o en la propiedad conjunta border-style. También pueden usarse en la parte de descripción del estilo del borde de las propiedades compuestas border-top, border-right, border-bottom, border-left o border.
Las propiedades del estilo del borde especifican el estilo de la línea del borde de una caja (sólida, doble, punteada, etc.). Puede tomar uno de los siguientes valores:
Todos los bordes son dibujados por encima del fondo de la caja. El color de los bordes con valores de 'groove', 'ridge', 'inset' y 'outset' depende de la propiedad 'color' del elemento.
Los anchos del borde se pueden usar en las propiedades individuales border-top-width, border-right-width, border-bottom-width y border-left-width o en la propiedad conjunta border-width. También pueden usarse en la parte de descripción del ancho del borde de las propiedades compuestas border-top, border-right, border-bottom, border-left o border.
A la hora de indicar el ancho del borde, se puede seleccionar uno de los siguientes valores:
La interpretación de los primeros tres valores depende de la aplicación del usuario. Sin embargo, se debe mantener la relación de orden entre ellos. Es decir, el borde thon siempre será más fino que el borde medium, y éste lo será que el borde thick.
Los colores de bordes se pueden usar en las propiedades individuales border-top-color, border-right-color, border-bottom-color y border-left-color o en la propiedad conjunta border-color. También pueden usarse en la parte de descripción del color del borde de las propiedades compuestas border-top, border-right, border-bottom, border-left o border.
El color del elemento puede especificarse indicando su código rgb o su nombre. También puede indicarse la opción transparent, con lo cual el borde es transparente (no obstante, puede tener grosor). Si el color del borde de un elemento no es especificado, el navegador toma el valor de la propiedad 'color' del elemento para el color del borde.
Como se ha indicado anteriormente, lo más usual es que los cuatro lados del borde tenga las mismas características de ancho, color y estilo. Por ello, la manera más directa de definir las propiedades del borde es usando la propiedad compuesta border.
La propiedad compuesta border permite establecer simultáneamente los cuatro bordes (arriba, derecha, abajo e izquierda) de un elemento, definiendo definiendo su color, grosor y estilo.
Las tres características del borde se pueden escribir en cualquier orden.
p { border: red 3px solid; }
Las propiedades compuestas border-top, border-right, border-bottom y border-left permiten establecer de forma independiente los cuatro bordes (arriba, derecha, abajo e izquierda, respectivamente) de un elemento, definiendo su color, su grosor y su estilo. Se pueden escribir las tres características de cada borde en cualquier orden. Se puede definir uno, dos, tres o cuatro bordes.
p { border-left: red 3px solid; }
El párrafo del ejemplo anterior sólo tendría borde a la izquierda.
p { border-top: black 3px dashed;
border-left: red 3px solid; }
El párrafo del ejemplo anterior sólo tendría bordes a la izquierda y arriba. Además serían de distinto tipo.
p { border-top: black 3px dashed;
border-bottom: blue 5px dotted;
border-left: red 3px solid; }
El párrafo del ejemplo anterior tendría bordes a la izquierda, arriba y abajo.
p { border-top: black 3px dashed;
border-right: green 5px double;
border-bottom: blue 5px dotted;
border-left: red 3px solid; }
El párrafo del ejemplo anterior tendría bordes a la izquierda, arriba y abajo.
La propiedad border-color permite establecer el color de los cuatro lados. La propiedad border-width permite establecer el grosor de los cuatro lados. La propiedad border-style permite establecer el estilo de los cuatro lados. En cada una de ellas Se pueden indicar de uno a cuatro valores, que se interpretan de la siguiente manera:
p { border-color: red blue;
border-width: 5px 3px;
border-style: dotted solid;}
Con lo que se obtendría un párrafo como el siguiente: