Atributo outline-style de CSS

Definición y uso

La propiedad 'outline-style' se utiliza para establecer el estilo de la línea de contorno completa del elemento. El estilo no puede ser 'none', de lo contrario, el contorno no se mostrará.

outline (contorno) es una línea dibujada alrededor del elemento, ubicada en el exterior del borde, que puede resaltar el elemento. La propiedad outline establece la línea de contorno alrededor del elemento.

Notas:Siempre declare la propiedad outline-style antes de la propiedad outline-color. El elemento solo puede cambiar el color de su contorno después de obtener el contorno.

Notas:La línea de contorno no ocupa espacio y no necesariamente es rectangular.

Véase también:

Tutorial de CSS:CSS contorno

Manual de referencia de CSS:Atributo outline

Manual de referencia de HTML DOM:Propiedad outlineStyle

Ejemplo

Establecer el estilo de la línea de contorno:

p
  {
  outline-style:dotted;
  }

Prueba por ti mismo

Sintaxis de CSS

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valor del atributo

Valor Descripción
none Predeterminado. Define sin contorno.
hidden Define el contorno oculto.
dotted Define el contorno de línea punteada.
dashed Define el contorno de línea punteada.
solid Define el contorno de línea sólida.
double Define el contorno de línea doble. El ancho de la línea doble es igual al valor de outline-width.
groove Define el contorno 3D con rebaje. Este efecto depende del valor de outline-color.
ridge Define el contorno 3D con ranura. Este efecto depende del valor de outline-color.
inset Define el contorno 3D con rebaje. Este efecto depende del valor de outline-color.
outset Define el contorno 3D con relieve. Este efecto depende del valor de outline-color.
inherit Se debe especificar que la configuración del estilo del contorno debe ser heredada del elemento padre.

Detalles técnicos

Valor predeterminado: none
Herencia: no
Versión: CSS2
Sintaxis de JavaScript: object.style.outlineStyle="dotted"

Ejemplo TIY

Establecer el estilo de la línea de contorno
Este ejemplo muestra cómo establecer el estilo de la línea de contorno.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.5 1.2 7.0

Notas:Si se especifica !DOCTYPE, IE8 admite la propiedad outline.