Propiedad outline-style

DefiniciónEstablece el estilo del perfil de los elementos
Valores
permitidos
Uno y sólo uno de los siguientes valores:
  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • inherit
Valor inicialnone
Se aplica aTodos los elementos
Válida enmedios visuales, medios interactivos
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/ui.html#propdef-outline-style

Ejemplos de uso

La propiedad outline-style establece el estilo del perfil de los elementos. Al contrario de lo que sucede con la propiedad border-style, no se pueden establecer diferentes estilos para cada uno de los cuatro lados. De hecho, el perfil de un elemento es único, ya que no existe el concepto de perfil superior o perfil derecho.

Los estilos definidos para los perfiles son exactamente los mismos que los definidos para los bordes. La única excepción es el valor hidden, que es válido para los bordes pero no para los perfiles. Además, el estándar CSS 2 tampoco permite utilizar estilos diferentes de los predefinidos, por lo que no se pueden hacer perfiles curvados ni se pueden utilizar imágenes para crear perfiles avanzados.

El significado de cada uno de los estilos de perfil se explica en la siguiente tabla:

Valor Descripción
none No se muestra ningún perfil. Como se trata del valor por defecto, ningún elemento muestra un perfil a menos que se establezca de forma explícita
dotted Perfil punteado, formado por una serie de puntos separados por espacios
dashed Perfil discontinuo, formado por una serie de pequeños trazos intercalados por espacios
solid Perfil continuo, formado por una línea recta continua
double Perfil doble, formado por dos líneas rectas continuas separadas entre sí por un espacio en blanco
groove Perfil hundido, que visualmente parece que se encuentra por debajo del nivel de la superficie de la pantalla
ridge Perfil saliente, que visualmente parece que se encuentra por encima del nivel de la superficie de la pantalla
inset Perfil hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo del nivel de la superficie de la pantalla
outset Perfil saliente, que provoca que el elemento que encierra parezca que se encuentra por encima del nivel de la superficie de la pantalla

El estándar oficial define los diferentes estilos de perfil que se pueden aplicar, pero no detalla el aspecto que deben tener. De esta forma, existen diferencias notables en el aspecto con el que los navegadores muestran cada estilo de perfil.

En el siguiente ejemplo se muestran todos los estilos de perfil con una anchura de 1px y con una anchura de 4px. Prueba a ver esta página en diferentes navegadores y podrás apreciar diferencias importantes sobre todo en los estilos groove y ridge:

div { outline-style: none; outline-width: 1px; }
div { outline-style: dotted; outline-width: 1px; }
div { outline-style: dashed; outline-width: 1px; }
div { outline-style: solid; outline-width: 1px; }
div { outline-style: double; outline-width: 1px; }
div { outline-style: groove; outline-width: 1px; }
div { outline-style: ridge; outline-width: 1px; }
div { outline-style: inset; outline-width: 1px; }
div { outline-style: outset; outline-width: 1px; }
div { outline-style: none; outline-width: 4px; }
div { outline-style: dotted; outline-width: 4px; }
div { outline-style: dashed; outline-width: 4px; }
div { outline-style: solid; outline-width: 4px; }
div { outline-style: double; outline-width: 4px; }
div { outline-style: groove; outline-width: 4px; }
div { outline-style: ridge; outline-width: 4px; }
div { outline-style: inset; outline-width: 4px; }
div { outline-style: outset; outline-width: 4px; }

En el ejemplo anterior, como los elementos estan muy juntos, se produce un solapamiento de los perfiles gruesos de 4px de anchura. Cuando se utilizan perfiles es fácil que se produzcan solapamientos, ya que siempre se dibujan en un plano superior y no afectan ni a la anchura ni al posicionamiento de los elementos. Aunque se produzcan solapamientos, los elementos no se desplazan ni se descolocan.