La propiedad abreviada CSS border-style permite definir a la vez el estilo de línea de los cuatro bordes de un elemento.

/* Keyword values */
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

/* vertical | horizontal */
border-style: dotted solid;

/* top | horizontal | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed; 

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;

Nota: El valor por defecto de  border-style es none (ninguno). Implica que si cambiamos border-width y border-color, no veremos el borde si no cambiamos esta propiedad a algo diferente de none (nulo) o hidden (oculto)

Valor inicialas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter.
Heredableno
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

La propiedad border-style puede definirse usando uno, dos, tres o cuatro valores.

  • Cuando solo especificamos un valor, este se aplica a los cuatro lados.
  • Si especificamos dos valores, el primero se refiere arriba y abajo y el segundo se refiere a izquierda y derecha.
  • Cuando incluimos tres valores, el primero se aplica arriba, el segundo se aplica a izquierda y derecha y el tercero se aplica abajo.
  • Si especificamos cuatro valores, los estilos se aplicarán arriba, derecha, abajo e izquierda en sentido de las agujas del reloj.

Cada valor será una palabra clave de la siguiente lista

Valores

<br-style>
Describe el estilo del borde. Puede adoptar los siguientes valores:
none
 
Al igual que hidden, no muestra ningún borde. A menos que haya una background-image (imagen de fondo), el valor calculado de border-top-width será 0 aunque el valor especificado sea otro. En el caso de colapso de bordes y celdas de tabla, el valor none tiene la prioridad menor: si se establecen otros bordes conflictivos, este se mostrará.
hidden
 

Al igual que none, no muestra ningún borde. A menos que haya una background-image (imagen de fondo), el valor calculado de border-top-width será 0 aunque el valor especificado sea otro. En el caso de caída de bordes y celdas de tabla, el valor hidden tiene la prioridad mayor: si se establecen otros bordes conflictivos, este no se mostrará.

dotted
 
Muestra una serie de puntos redondos. El espaciado de los puntos no se especifica y viene predeterminado. El radio de los puntos es la mitad de border-top-width.
dashed
 
Muestra una serie de guiones cortos cuadrados o segmentos de línea. La medida exacta y la longitud de los segmentos no se pueden especificar y vienen predeterminados.
solid
 
Muestra una línea recta, solida y simple.
double
 
Muestra dos líneas rectas que se añaden a la medida en píxeles definida por border-width o por border-top-width.
groove
 
(surco) Muestra un borde con una apariencia curva. Es lo contrario de ridge (cresta).
ridge
 
(cresta) Muestra un borde con una apariencia extruida. Es lo contrario de groove (surco).
inset
 
(incrustado) Muestra un borde que hace que le elemento aparezca incrustado. Es lo contrario de outset. Cuando se applica a una celda de tabla con border-collapse puesto en collapsed, este valor se comporta como groove.
outset
 

(resaltado) Muestra un borde que hace que el elemento aparezca en relieve. Es lo contrario de inset. Cuando se aplica a una celda de tabla con border-collapse puesto en collapsed, este valor se comporta como ridge.

Sintaxtis formal

<br-style>{1,4}

where
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Ejemplos

Tabla con todos los valores de la propiedad

Veamos un ejemplo con todos los valores de la propiedad.

HTML

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

CSS

/* Define look of the table */
table {
  border-width: 3px;
  background-color: #52E396;
}
tr, td {
  padding: 2px;
}

/* border-style example classes */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;}
.b4 {border-style:dashed;}
.b5 {border-style:solid;}
.b6 {border-style:double;}
.b7 {border-style:groove;}
.b8 {border-style:ridge;}
.b9 {border-style:inset;}
.b10 {border-style:outset;}

Salida

Especificaciones

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-style' in that specification.
Candidate Recommendation No change.
CSS Level 2 (Revision 1)
The definition of 'border-style' in that specification.
Recommendation Adds hidden keyword value.
CSS Level 1
The definition of 'border-style' in that specification.
Recommendation Initial definition.

Compatibilidad de navegadores

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 20 or earlier (12) 1.0 (1.7 or earlier)[1] 4.0 3.5 1.0
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.6 20 or earlier (12) 1.0 (1.9.2)[1] 7.0 (Yes) 3.0

[1] Antes de Firefox 50, los estilos de bordes con esquinas redondeadas (con border-radius) eran siempre interpretadas como si border-style fuera solid. Esto se solucionó desde Firefox 50.

Ver también

Categorías

Interwiki Languag

Etiquetas y colaboradores del documento

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