Características border-style en CSS

por
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 inicialPara cada valor corto:
border-top-style: none
border-right-style: none
border-bottom-style: none
border-left-style: none
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 

muestra las diferentes formas de marcos a través de border-style. 

Código HTML:


  

    none
    hidden
    dotted
    dashed
  

  

    solid
    double
    groove
    ridge
  

  

    inset
    outset
  


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.
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: {1,4};
dónde:
 = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset