Atributo border-style de CSS

Definición y uso

La propiedad border-style se utiliza para definir el estilo de todos los bordes del elemento, o para definir estilos de borde individuales para cada borde.

La borde solo puede aparecer cuando este valor no es none.

Ejemplo 1

border-style:dotted solid double dashed;
  • La borde superior es punteada
  • La borde derecho es continua
  • La borde inferior es doble
  • La borde izquierdo es punteada

Ejemplo 2

border-style:dotted solid double;
  • La borde superior es punteada
  • La borde derecho y la borde izquierdo son continuas
  • La borde inferior es doble

Ejemplo 3

border-style:dotted solid;
  • La borde superior y la borde inferior son punteadas
  • La borde derecho y la borde izquierdo son continuas

Ejemplo 4

border-style:dotted;
  • Todas las 4 bordes son punteadas

Vea también：

Tutorial de CSS：Borde de CSS

Manual de referencia HTML DOM:Atributo borderStyle

Ejemplo

Establecer el estilo de los 4 bordes:

p
  {
  border-style:solid;
  }

Prueba tu mismo

Sintaxis de CSS

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valor del atributo

Valores Descripción
none Define un borde sin bordes.
hidden Es igual a "none". Sin embargo, cuando se aplica a una tabla, "hidden" se utiliza para resolver conflictos de borde.
dotted Define un borde punteado. En la mayoría de los navegadores se representa como una línea sólida.
dashed Define una línea punteada. En la mayoría de los navegadores se representa como una línea sólida.
solid Define una línea sólida.
double Define dos líneas. El ancho de las líneas es igual al valor de border-width.
groove Define un borde 3D en surco. Su efecto depende del valor de border-color.
ridge Define un borde 3D ondulado. Su efecto depende del valor de border-color.
inset Define un borde 3D inset. Su efecto depende del valor de border-color.
outset Define un borde 3D outset. Su efecto depende del valor de border-color.
inherit Se debe heredar el estilo de borde del elemento padre.

Descripción

El estilo de borde más impredecible es double. Se define como el ancho de dos líneas más el espacio entre estas dos líneas que suma el valor de border-width. Sin embargo, la especificación CSS no dice si una línea es más gruesa que la otra o si ambas líneas deben tener el mismo ancho, ni indica si el espacio entre las líneas debe ser más grueso que las líneas. Todas estas decisiones las toma el agente de usuario, y los diseñadores no tienen influencia alguna en ellas.

Detalles técnicos

Valor predeterminado: no especificado
Herencia: no
Versión: CSS1
Sintaxis de JavaScript: object.style.borderStyle="dotted double"

Más ejemplos

Establecer el estilo de los cuatro bordes
Este ejemplo muestra cómo establecer el estilo de los cuatro bordes.
Establecer diferentes bordes en cada lado
Este ejemplo muestra cómo establecer diferentes bordes en los lados de un elemento.

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5