Outline: Destacando elementos con CSS

Este post tratará del outline y de sus posibles modificaciones. Esta propiedad es similar a los bordes pero tiene 2 diferencias a destacar:

  • No ocupa espacio.
  • No necesita ser rectangular.

La función que tiene es que puede resaltar algún aspecto de la página para el usuario. Al no ocupar espacio como un border, no afectaría al flujo de la página donde el resto de los elementos están posicionados.

Esta propiedad a diferencia de border, tiene todos los lados iguales, no se puede especificar diferentes valores para distintos lados de la propiedad. A continuación hablaré de las propiedades que se pueden modificar.

Outline-width

Especifica el tamaño a añadir a los lados de la caja. Esta propiedad permite usar los valores thin, medium y thick como usarías con la propiedad border-width. Además, se puede especificar su valor con una longitud como en el siguiente ejemplo

Outline-style

Con esta propiedad se escoge que tipo de línea (solid, dotted o dashed) tendrá alrededor de la caja. El valor puede ser similar a cualquiera que usarías con border-style.

Outline-Color

Se puede especificar el color que tendrán las líneas. Ese valor puede ser cualquier color válido en hexadecimal.

Outline

Esto es un atajo que permite especificar las 3 propiedades explicadas anteriormente de una sola vez. A diferencia de otras propiedades, el orden de los valores puede ser en cualquier orden.

outline

Resultado del código

Como puedes observar en la foto, no afecta a la posición de los otros objetos de la página, caso que sucedería con el uso de otras propiedades. Sin embargo, pasaría por encima de ellos.

Y aquí finaliza el tutorial de hoy, espero que os haya gustado. A seguir picando 🙂