We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 inicialnone
Applies toall elements
Heredableno
Mediavisual, interactive
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

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-width es 0).
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-width es 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

auto | <br-style>

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

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

Especificación Estado Comentarios
CSS Basic User Interface Module Level 3
La definición de 'outline-style' en esta especificación.
Proposed Recommendation Se añade el valor auto
CSS Level 2 (Revision 1)
La definición de 'outline-style' en esta especificación.
Recommendation Definición inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 1.0 1.5 (1.8)[1] 8.0 7.0 1.2 (125)
auto ? ? ? ? ?
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico 2.1 46.0 (46) 10 12 3.2
auto ? ? ? ? ?

[1] En navegadores anteriores a Gecko 1.8 (Firefox 1.5) este efecto podía lograrse usando la CSS de Mozilla -moz-outline-style.

Etiquetas y colaboradores del documento

Colaboradores en esta página: israel-munoz
Última actualización por: israel-munoz,