| Definición | Establece el estilo de algunos o todos los bordes de los elementos |
|---|---|
| Valores permitidos | Uno, dos, tres o cuatro de los siguientes valores: |
| Valor inicial | Cada borde define su propio valor por defecto |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS21/box.html#propdef-border-style |
Ejemplos de uso
La propiedad border-style permite establecer el estilo de algunos o todos los bordes de un elemento. El estándar CSS 2 sólo permite utilizar los tipos de borde predefinidos, por lo que no se pueden hacer bordes curvados ni utilizar imágenes para crear bordes avanzados.
El significado de cada uno de los estilos de borde se explica en la siguiente tabla:
| Valor | Descripción |
|---|---|
none |
No se muestra ningún borde. Como se trata del valor por defecto de cada uno de los bordes, ningún elemento muestra un borde a menos que se establezca de forma explícita |
hidden |
Visualmente es idéntico a none, ya que provoca que no se muestre ningún borde. Su única diferencia es la forma en la que el navegador resuelve los conflictos entre bordes adyacentes de las celdas de las tablas |
dotted |
Borde punteado, formado por una serie de puntos separados por espacios |
dashed |
Borde discontinuo, formado por una serie de pequeños trazos intercalados por espacios |
solid |
Borde continuo, formado por una línea recta continua |
double |
Borde doble, formado por dos líneas rectas continuas separadas entre sí por un espacio en blanco |
groove |
Borde hundido, que visualmente parece que se encuentra por debajo del nivel de la superficie de la pantalla |
ridge |
Borde saliente, que visualmente parece que se encuentra por encima del nivel de la superficie de la pantalla |
inset |
Borde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo del nivel de la superficie de la pantalla |
outset |
Borde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima del nivel de la superficie de la pantalla |
Además, la propiedad border-style es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.
Si se quiere establecer el mismo valor para el estilo de todos los bordes de un elemento, se podría utilizar la siguiente regla CSS:
div {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}En este caso, es mejor utilizar la propiedad border-style para establecer de forma abreviada el mismo estilo a todos los bordes del elemento:
div {
border-style: solid;
}La propiedad border-style es tan poderosa que permite establecer el estilo de uno, dos, tres o los cuatro bordes de forma simultánea.
Si se indican dos valores, el primero hace referencia a los bordes superior e inferior y el segundo es el valor de los bordes izquierdo y derecho, de modo que las siguientes reglas CSS son equivalentes:
div {
border-style: solid double;
}
div {
border-top-style: solid;
border-right-style: double;
border-bottom-style: solid;
border-left-style: double;
}Si se indican tres valores, el primero hace referencia al borde superior, el segundo es el valor de los bordes izquierdo y derecho y el tercero es el borde inferior, de modo que las siguientes reglas CSS son equivalentes:
div {
border-style: solid double dashed;
}
div {
border-top-style: solid;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: double;
}Por último, si se indican cuatro valores, el primero es el borde superior, el segundo es el borde derecho, el tercero es el borde inferior y el cuarto es el borde izquierdo, de modo que las siguientes reglas CSS son equivalentes:
div {
border-style: solid double dashed dotted;
}
div {
border-top-style: solid;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: dotted;
}Por otra parte, la especificación oficial define los diferentes estilos de borde que se pueden aplicar, pero no detalla el aspecto que deben tener. De esta forma, existen diferencias notables en el aspecto con el que los navegadores muestran cada estilo de borde.
En el siguiente ejemplo se muestran todos los estilos de borde con una anchura de 1px y con una anchura de 4px. Prueba a ver esta página en diferentes navegadores y podrás apreciar diferencias importantes sobre todo en los estilos groove y ridge:
Utilizando la propiedad border-style se pueden mostrar fácilmente bordes complejos en cualquier elemento:
El uso de propiedades como border-style no sólo hace más breve el código CSS, sino que demuestra que se tienen conocimientos avanzados de CSS.