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 para representarlos es outline y es abreviada, 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. |
outline-offset | Desplaza los 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’
La propiedad CSS outline es una abreviatura (shorthand) que permite especificar mediante tres parámetros el grosor, el estilo y el color, unificando las tres propiedades anteriores. Esta abreviatura es útil para sintetizar en una única declaración los tres atributos para definir contornos.
Por ejemplo:
.contorno {
outline: 4px double teal;
}
Resultado:
Párrafo usando la propiedad
outline.
Conviene señalar que la abreviatura outline no permite indicar el desplazamiento de outline-offset, ya que se introdujo más tarde.
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.
