border-style

Resumen

La propiedad estilo de borde (border-style) es un corte camino para definir de un golpe el estilo de línea de los cuatro bordes de un elemento.

• valor inicial: ninguna o según las propiedades individuales.
• Se aplica a: todos los elementos
• herencia: no
• Percentages: N/A
• Medio: visual
• valor calculada: como las propiedades individuales

Sintaxis

border-style: [ <border-style> ]{1,4} | inherit

Valores

<border-style> 

el estilo del borde puede tomar cualquier valor de las siguientes:

• none : sin borde, el ancho es definido como 0. Es el valor por defecto.
• hidden : igual que 'none', excepto en el caso de conflictos de bordes por ejemplo en elementos de tabla.
• dashed : serie de guiones (-----).
• dotted : series de puntos (.....).
• double : dos líneas rectas continuas separadas de un número de píxel definido como border-width.
• groove : efecto de hundimiento del borde.
• inset : efecto de hundimiento de una caja.
• outset : efecto inverso a 'inset', la caja parece salir, como en 3D.
• ridge : efecto inverso a 'groove', el borde parece salir, como en 3D.
• solid : línea única, recta, sólida.

Hay cuatro valores para definir el/los borde/s

• el primero: los cuatro bordes (todos).
• el segundo: izquierda y derecha.
• el tercero: abajo.
• el cuarto: izquierda.

Si utilizamos:

• el 1º y 2º: se define arriba+abajo y derecha+izquierda
• el 1º, 2º y 3º: se define arriba, derecha+izquierda y abajo
• el 1º, 2º, 3º y 4º: cada borde individualmente empezando con el de arriba hasta la izquierda en sentido del reloj.

Ejemplos

Ver El Ejemplo Vivo

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Notas

Por defecto el estilo de borde (border-style) es definido como ninguno ('none'). Ésto significa que aún modificando el ancho (border-width) y el color (border-color) del borde no se verá ningún borde hasta que también se modifique el estilo de borde (border-style) con un valor diferente a none o hidden.

Especificaciones

• CSS 1
• CSS 2.1
• CSS 3

Compatibilidad

Ver también

border, border-color, border-style, border-width, -moz-border-radius