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 April 2017.

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

css

/* 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

outline-style = 
  auto                  |
  <outline-line-style>

Ejemplo 1 - `dotted` y `dashed`

HTML

html

<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>

CSS

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

html

<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>

CSS

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

html

<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>

CSS

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

html

<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>

CSS

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

BCD tables only load in the browser