Características border-style en CSS

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-widthborder-color, no podrá ver el marco hasta que cambie el valor de esta propiedad por otro distinto de nonehidden.

Valor inicialPara cada valor corto:
border-top-stylenone
border-right-stylenone
border-bottom-stylenone
border-left-stylenone
Aplicado aTodos los artículos.
HeredableNo
Valor calculadoPara 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ísticaChromeFirefoxIEÓperaSafari
Soporte básico1.01.05.53,51.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:

noneSimilar a oculto, no hace que se muestre ningún marco. *Nota*
hiddenSimilar a la palabra clave none, no hace que se muestre ningún marco. *Nota*
dottedMuestra una serie de puntos y el espacio entre ellos no está definido por la especificación, sino por el navegador.
dashedEl ancho, la longitud y el espaciado de una cadena de guiones no están definidos por la especificación, pero dependen del navegador.
solidAncho de línea completo.
doubleMuestre dos líneas rectas completadas.
grooveMuestre el marco como tallado o grabado, y este valor es el opuesto al valor ridge.
ridgeMuestra la ventana como una ventana emergente, y este valor es el opuesto al valor groove.
insetMuestre el marco de tal manera que el elemento parezca estar incrustado en su lugar, que es lo opuesto al valor outset.
outsetEl 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