| Definición | Establece el estilo del borde izquierdo de los elementos |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | none |
| 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-left-style |
Ejemplos de uso
La propiedad border-left-style permite establecer el estilo del borde izquierdo 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 esta propiedad, ningún elemento muestra un borde izquierdo 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 |
La especificación oficial define los diferentes estilos 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:
En el ejemplo anterior, como sólo se establece uno de los cuatro bordes, no es posible comprobar el efecto tridimensional de los estilos más avanzados. El siguiente ejemplo muestra los cuatro bordes de los elementos con los estilos groove, ridge, inset y outset:
Para ver todos los estilos aplicados en los cuatro bordes de un elemento, puedes consultar la documentación de la propiedad border-style.