Características border-style en CSS

La propiedad abreviada border-style CSS especifica la forma de la fuente del marco del elemento para todas sus caras (derecha, izquierda, superior e inferior).

Funciones border-style css

/* palabras reservadas */ 
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-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; 
/* valores globales */ 
border-style: inherit;
border-style: initial;
border-style: unset;

Nota: El valor inicial de la propiedad border-style es none, lo que significa que incluso si establece los atributos border-width y border-color, no podrá ver el marco hasta que cambie el valor de esta propiedad por otro distinto de none o hidden.

Valor inicial	Para cada valor corto: `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none`
Aplicado a	Todos los artículos.
Heredable	No
Valor calculado	Para cada valor corto: `border-bottom-style`: Como se especificó. `border-left-style`: Como se especificó. `border-right-style`: Como se especificó. `border-top-style`: Como se especificó.

Ejemplos y aplicaciones de código

Este es un ejemplo de una tabla que <table> muestra las diferentes formas de marcos a través de border-style.

Código 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>

Código CSS:

table {
  border-width: 3px;
  background-color: #52E396;
}
tr, td {
  padding: 2px;
}

.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;}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	5.5	3,5	1.0

Características generales

La propiedad se puede especificar con un valor border-style, dos valores, tres valores o cuatro valores.

Cuando se especifica un solo valor, se aplicará a todas las facetas del marco.
Cuando se especifican dos valores, el primer valor se aplicará a los marcos superior e inferior, y el segundo valor a los marcos izquierdo y derecho.
Cuando se especifican tres valores, el primer valor se aplicará al marco superior, el segundo valor a los marcos izquierdo y derecho y el tercer valor al marco inferior.
Cuando se especifican cuatro valores, los valores se aplicarán al lado superior, derecho, inferior e izquierdo, respectivamente (es decir, la rotación comienza desde el lado superior y continúa en el sentido de las agujas del reloj).

Cada uno de los valores especificados debe ser uno de los valores que se enumeran a continuación.

<br-style>

Este valor describe cómo se ve el marco y puede ser una de las siguientes palabras reservadas:

`none`	Similar a oculto, no hace que se muestre ningún marco. Nota
`hidden`	Similar a la palabra clave none, no hace que se muestre ningún marco. Nota
`dotted`	Muestra una serie de puntos y el espacio entre ellos no está definido por la especificación, sino por el navegador.
`dashed`	El ancho, la longitud y el espaciado de una cadena de guiones no están definidos por la especificación, pero dependen del navegador.
`solid`	Ancho de línea completo.
`double`	Muestre dos líneas rectas completadas.
`groove`	Muestre el marco como tallado o grabado, y este valor es el opuesto al valor `ridge`.
`ridge`	Muestra la ventana como una ventana emergente, y este valor es el opuesto al valor `groove`.
`inset`	Muestre el marco de tal manera que el elemento parezca estar incrustado en su lugar, que es lo opuesto al valor `outset`.
`outset`	El ancho del marco de tal manera que el elemento parezca sobresalir de su lugar, que es lo opuesto al valor `inset`.

Estructura border-style en CSS

border-style: <br-style>{1,4};

dónde:

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