Skip to main content

Visit Mozilla.org

CSS:border-style

De MDC

« Anterior Siguiente »

[editar] 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.

[editar] Sintaxis 

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

[editar] 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.

[editar] Ejemplos

Ver ejemplos en acción 

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

[editar] 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.

[editar] Especificaciones

[editar] Compatibilidad

Navegador Versión mínima
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5

[editar] Ver también

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

Obtenido de "http://developer.mozilla.org/es/docs/CSS:border-style"