CSS1 | Border-style

Esta propiedad es bastante sencilla y  sin animo de quitarle importancia, haremos solo un repaso... 


Border-style configura el estilo de los cuatro bordes de un elemento, la propiedad acepta de uno a cuatro valores :

border-style: value;

Donde "value" representa una de las siguientes palabras claves: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset o inherit.


Por defecto el valor de border-style es "none", no se muestra borde alguno, por eso siempre que queremos trabajar con bordes debemos especificar esta propiedad con un estilo,  sino simplemente el borde no se verá. El valor "hidden" visualmente es idéntico a "none", solo cambia la forma en la que se resuelven los conflictos entre bordes adyacentes de las celdas de las tablas. El valor "inherit" especifica que el estilo de borde será heredado del elemento padre.  el resto de estilos esta representado en la siguiente imagen:

     La imagen corresponde a una captura de pantalla en el navegador Google Chrome. 

La propiedad border-style es soportada  por la mayoría de los navegadores. De todos modos en algunos casos puede variar la visualización de un navegador a otro. En la siguiente imagen se muestra la interpretación de IE y de Google Chrome de un div con un estilo de borde "ridge" y para apreciarlo mejor el borde tiene un border-whitdh: 10px; : 

Hemos utilizado hasta ahora la forma abreviada, en la que configuramos todos los bordes con el mismo valor:

border-style: double;

Veamos ahora la posibilidad de combinar los valores dentro de la misma sentencia. Como comentamos antes, esta propiedad acepta hasta cuatro valores que se asignaran a el borde superior, derecho, inferior e izquierdo respectivamente. Si especifican 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 y si se especifican  dos valores, el primero hace referencia a los bordes superior e inferior y el segundo es el valor de los bordes izquierdo y derecho:

También podemos especificar un lado concreto utilizando borde-top-style, border-rigth-style, border-bottom-style o border-left-style, en el siguiente gráfico se muestra las propiedades del gráfico anterior especificadas de manera independiente:

No hay especificaciones sobre la manera en que se visualiza el efecto o es espaciamiento de puntos. 


Espero que les haya sido de utilidad... hasta la próxima!!!