outline-style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
Resumen
La propiedad CSS outline-style es usada para establecer el estilo del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento.
Por lo general, es más conveniente usar la propiedad de forma reducida outline en vez de outline-style, outline-width y outline-color por separado.
| Valor inicial | none |
|---|---|
| Applies to | all elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | by computed value type |
Sintaxis
/* Valores clave */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
/* Valores globales */
outline-style: inherit;
outline-style: initial;
outline-style: unset;
Valores
<br-style> puede ser uno de los siguientes:
- none
-
Sin contorno (
outline-widthes0). - dotted
-
Línea punteada. El contorno es una serie de puntos.
- dashed
-
Línea discontinua. El contorno es una serie de segmentos de línea cortos.
- solid
-
El contorno es una línea simple.
- double
-
El contorno son dos líneas paralelas. El valor de
outline-widthes la suma de los dos líneas y el espacio entre ellas. - groove
-
El contorno parece estar tallado dentro del lienzo.
- ridge
-
Lo opuesto a
groove: el contorno parece salir del lienzo. - inset
-
El contorno hace a la caja verse como si estuviera embedida dentro del lienzo.
- outset
-
Lo opuesto a
inset: el contorno hace a la caja verse como si estuviera saliendo del lienzo.
Sintaxis formal
outline-style =
auto |
<outline-line-style>
Ejemplo 1 - dotted y dashed
HTML
<div>
<div class="dotted">
<p class="dashed">Outline Demo</p>
</div>
</div>
CSS
.dotted {
outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
outline-style: dashed;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Ejemplo 2 - solid y double
HTML
<div>
<div class="solid">
<p class="double">Outline Demo</p>
</div>
</div>
CSS
.solid {
outline-style: solid;
}
.double {
outline-style: double;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Ejemplo 3 - groove y ridge
HTML
<div>
<div class="groove">
<p class="ridge">Outline Demo</p>
</div>
</div>
CSS
.groove {
outline-style: groove;
}
.ridge {
outline-style: ridge;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Ejemplo 4 - inset y outset
HTML
<div>
<div class="inset">
<p class="outset">Outline Demo</p>
</div>
</div>
CSS
.inset {
outline-style: inset;
}
.outset {
outline-style: outset;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Especificaciones
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-style |
Compatibilidad con navegadores
Loading…