Propiedad border-style

DefiniciónEstablece el estilo de algunos o todos los bordes de los elementos
Valores
permitidos
Uno, dos, tres o cuatro de los siguientes valores:
  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • inherit
Valor inicialCada borde define su propio valor por defecto
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredano
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:

div { border-style: none; border-width: 1px; }
div { border-style: hidden; border-width: 1px; }
div { border-style: dotted; border-width: 1px; }
div { border-style: dashed; border-width: 1px; }
div { border-style: solid; border-width: 1px; }
div { border-style: double; border-width: 1px; }
div { border-style: groove; border-width: 1px; }
div { border-style: ridge; border-width: 1px; }
div { border-style: inset; border-width: 1px; }
div { border-style: outset; border-width: 1px; }
div { border-style: none; border-width: 4px; }
div { border-style: hidden; border-width: 4px; }
div { border-style: dotted; border-width: 4px; }
div { border-style: dashed; border-width: 4px; }
div { border-style: solid; border-width: 4px; }
div { border-style: double; border-width: 4px; }
div { border-style: groove; border-width: 4px; }
div { border-style: ridge; border-width: 4px; }
div { border-style: inset; border-width: 4px; }
div { border-style: outset; border-width: 4px; }

Utilizando la propiedad border-style se pueden mostrar fácilmente bordes complejos en cualquier elemento:

div { border-style: solid double; }
div { border-style: dashed dotted; }
div { border-style: dashed double dotted; }

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.