CSS: Contornos

Los contornos son una línea de perímetro alrededor de los elementos HTML. Son muy similares a los bordes pero no ocupan espacio, por lo que su aparición no modifica las dimensiones de la caja. Por tanto, los contornos no causan el desplazamiento de los demás elementos HTML.

Otra característica de los contornos es que se dibujan por encima del elemento, como si estuvieran en una capa superior, y se representan a partir de los bordes hacia el exterior. La propiedad abreviada para representarlos es outline, por lo que existen otras propiedades específicas.

Lista de propiedades para definir contornos:

Propiedad Descripción
outline-width Indica el grosor del contorno.
outline-style Indica el estilo del contorno.
outline-color Indica el color del contorno.
outline Abreviatura para definir contornos.

Vamos a ver un ejemplo comparativo entre el borde y el contorno. Creamos un elemento con un borde naranja de 5 píxeles y un contorno turquesa de 10 píxeles.

.comparativa {
  border: 5px solid #ff7f2a;
  outline: 10px solid Teal;
  height: 50px;
  width: 200px;
}

La propiedad ‘outline-width’

Con la propiedad outline-width se modifica el grosor de los contornos. Su valor debe ser una medida de longitud, que puede ser absoluta o relativa. Tal y como ocurre con border-width, también se puede definir el grosor de la línea con las palabras clave: thin, medium y thick.

A continuación se muestran algunos ejemplos de contorno variando el grosor cada 2 píxeles, con el fin de visualizar la diferencia.

.width1 { outline-width: 1px }
.width3 { outline-width: 3px }
.width5 { outline-width: 5px }

Resultado:

Párrafo con un contorno de 1 píxel.

Párrafo con un contorno de 3 píxeles.

Párrafo con un contorno de 5 píxeles.

Tal y como se puede ver en los ejemplos, el contorno se pone por encima de los márgenes. Este efecto provoca que las cajas se vean como si fueran más grandes, cuando en realidad tienen el mismo tamaño.

La propiedad outline-width sólo admite un parámetro.

La propiedad ‘outline-style’

La propiedad outline-style es la que permite modificar el estilo de los contornos. Al igual que ocurre con los bordes, existen varios tipos de estilo, como las líneas punteadas, discontinuas, líneas dobles o efectos 3D. Los estilos se especifican a través de 8 palabras clave.

Valor Descripción
none Valor por defecto. No muestra ningún contorno visible.
hidden Contorno oculto. No se muestra pero está ahí.
solid Contorno de un solo color (línea continua).
double Contorno de doble línea continua.
dotted Contorno de línea punteada (discontinua).
dashed Contorno de línea rayada (discontinua).
groove Contorno biselado con luz desde arriba.
ridge Contorno biselado con luz desde abajo.
inset Contorno 3D con profundidad hacia dentro.
outset Contorno 3D con profundidad hacia fuera.

Veamos algunos ejemplos:

.solid { outline-style: solid }
.double { outline-style: double }
.dotted { outline-style: dotted }
.dashed { outline-style: dashed }
.groove { outline-style: groove }
.ridge { outline-style: ridge }
.inset { outline-style: inset }
.outset { outline-style: outset }

Resultado:

Párrafo con contorno de estilo solid.

Párrafo con contorno de estilo double.

Párrafo con contorno de estilo dotted.

Párrafo con contorno de estilo dashed.

Párrafo con contorno de estilo groove.

Párrafo con contorno de estilo ridge.

Párrafo con contorno de estilo inset.

Párrafo con contorno de estilo outset.

La propiedad outline-style sólo admite un parámetro.

La propiedad ‘outline-color’

La propiedad outline-color es la que permite modificar el color de los contornos. Los colores se indican con los sistemas de color que admite CSS, es decir, con palabras clave o con los modelos de color RGB y HSL.

Veamos algunos ejemplos:

.naranja { outline-color: #ff7f2a }
.salmon { outline-color: Salmon }
.rojo { outline-color: rgb(220, 40, 40) }

Resultado:

Párrafo con contorno de color naranja.

Párrafo con contorno de color salmón.

Párrafo con contorno de color rojo.

La propiedad outline-color sólo admite un parámetro.

La propiedad ‘outline-offset’

Mediante la propiedad outline-offset se puede establecer un espacio de separación entre el límite exterior del borde y el límite exterior del contorno. Su valor debe ser una unidad de longitud para indicar el espacio de separación, y sólo admite un parámetro para definir los cuatro lados.

Veamos un ejemplo de uso de outline-offset:

.separacion {
  border: 5px solid #ff7f2a;
  outline: 10px solid Teal;
  outline-offset: 5px;
  height: 50px;
  width: 200px;
}

Resultado:

En este ejemplo se puede ver que el contorno se ha desplazado 5 píxeles hacia fuera, quedando por tanto un espacio de separación intermedio de 5 píxeles. Esta propiedad fue introducida en CSS de nivel 3.

La propiedad ‘outline’

Y para terminar, la propiedad outline es una abreviatura (shorthand) que permite especificar mediante tres parámetros el grosor, el estilo y el color. Las abreviaturas son muy útiles para sintetizar en una única declaración CSS los tres atributos que definen los contornos, como ocurre con los bordes.

Por ejemplo:

.contorno {
  outline: 4px double Teal;
}

Resultado:

Párrafo usando la propiedad outline.

Conviene señalar que esta la abreviatura outline no permite indicar el desplazamiento de outline-offset, ya que se introdujo más tarde.

← Artículo anterior
CSS: Visualización
Artículo siguiente →
CSS: Fondos