| Definición | Establece el estilo del perfil de los elementos |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | none |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales, medios interactivos |
| Se hereda | no |
| 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:
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.