
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
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS