Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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.

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

Compatibilidad

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

Ver también

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

 

Categorías

Interwiki Languages

Etiquetas y colaboradores del documento

 Colaboradores en esta página: teoli, Yuichiro, Nathymig
 Última actualización por: teoli,