Contornos CSS

Este Elemento tiene un borde negro y un contorno verde con un ancho de 10px

Un Contorno outline es una línea dibujada alrededor de los elementos, fuera de los bordes para hacer que el elemento se destaque.

CSS tiene las siguientes propiedades de contorno:

• outline-style
• outline-color
• outline-width
• outline-offset
• outlline

Nota: ¡Outline difiere de border! a diferencia de border, outline es dibujado alrededor del borde del elemento, y puede sobreponerse a otro contenido. Además, outline no es parte de las dimensiones del elemento. La anchura y altura total del elemento no se ven afectadas por el width del outline.

Estilo de Contorno

La propiedad outline-style establlece el estilo del contorno, y puede tener uno de los siguientes valores:

• dotted - Establece el contorno como una línea punteada.
• dashed - Establece el contorno como una línea discontinua.
• solid - Establece el contorno como una línea sólida.
• double - Establece el contorno como una línea doble.
• groove - Establece el contorno como una línea de surco 3D.
• ridge - Establece el contorno como una línea de cresta 3D.
• inset - Establece el contorno como una línea insertada (pulsado).
• outset - Establece el contorno como una línea inicial (no pulsado).

Ejemplo:

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

Muestra:

Contorno puntiado.

Contorno discontinuo.

Contorno sólido.

Contorno doble.

Contorno surco 3D.

Contorno cresta 3D.

Contorno insetado (pulsado).

Contorno iniciado (no pulsado).

Nota: Ninguno de las otras propiedades de contorno tendran efecto, a menos que outline-style este establecida.

Color del Contorno

La propieda outline-color es usada para establecer el color de el contorno.

El color puede establecerce por las siguientes maneras:

• Nombre - se establece con el nombre del color en ingles, como por ejemplo "red".
• RGB - se establece un color RGB, como por ejemplo "rgb(255,0,0)".
• Hex - se establece un color hexadecimal, como por ejemplo "#ff0000".
• Invertido: realiza una inversión de color (lo que garantiza que el contorno sea visible, independientemente del fondo de color).

El siguiente ejemplo mustra diferentes contornos con diferentes colores. Nótese también que estos elementos tienen un delgado borde negro interno del contorno:

Párrafo con un contorno solido rojo.

Párrafo con un contorno double verde.

Párrafo con contorno inicial amarillo.

Ejemplo:

p.ejemplo1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
}
p.ejemplo2 {
  border: 1px solid black;
  outline-style: double;
  outline-color: green;
}
p.ejemplo3 {
  border: 1px solid black;
  outline-style: outset;
  outline-color: yellow;
}

El siguiente ejemplo muestra el uso de outline-color: invert;, el cual realiza una inversión. Esto garantiza que el contorno sea visible independientemente del color de fondo.

Párrafo con contorno solido amarillo

Ejemplo:

p.ejemplo {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Ancho de Contorno

La propiedad outline-width establece el ancho del contorno, y se establecen con los siguientes valores:

• thin (1px aproximado).
• medium (3px aproximado).
• thick (5px aproximado).
• Tamaño especificado en:
  • px (pixeles)
  • pt (puntos)
  • cm
  • em
  • etc

El siguiente ejemplo muestra algunos contornos con diferentes anchos:

Párrafo con ancho de contorno establecido en thin.

Párrafo con ancho de contorno establecido en medium.

Párrafo con ancho de contorno establecido en thick.

Párrafo con ancho de contorno establecido en 4px.

Ejemplo:

p.ejemplo1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}
p.ejemplo2 {
  border: 1px solid black;
  outline-style: solid;
  oultine-color: red;
  outline-width: medium;
}
p.ejemplo3 {
  border: 1px solid black;
  outline-style: solid;
  oultine-color: red;
  outline-width: thick;
}
p.ejemplo4 {
  border: 1px solid black;
  outline-style: solid;
  oultine-color: red;
  outline-width: 4px;
}

Outline Simplificado

La propiedad outline es una propiedad corta o simplificada para establecer en una sola las propiedades individuales de contorno:

• outline-widt
• outline-style
• outline-color

La propiedad outline se establece con uno, dos o tres valores de la lista anterior. El orden de los valores no importan.

El siguiente ejemplo muestra algunos contornos establecidos con la propiedad simplificada outilne:

Párrafo con contorno discontinuo.

Párrafo con contorno puntiado en rojo.

Párrafo con contorno solido en amarillo de ancho 5px.

Párrafo con contorno de cresta en rosa de ancho grueso.

p.ejemplo1 { outline: dashed; }
p.ejemplo2 { outline: dotted red; }
p.ejemplo3 { outline: 5px solid yellow; }
p.ejemplo4 { outline: thick ridge pink }

Desplazamiento del Contorno

La propiedad outline-offset agrega un espacio entre el contorno y el borde de un elemento HTML. El espacio entre el contorno y el borde es transparente.

El siguiente ejemplo establece un contorno de 15 pixeles fuera del borde:

Este Párrafo tiene un contorno de 15px fuera del borde.

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

El siguiente ejemplo muestra que el espacio entre el elemento y su contorno es transparente:

Este Párrafo tiene un contorno de 15px fuera del borde.

p{
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Todas las propiedades de contornos CSS

Propiedad	Descripción
outline	Propiedad corta/simplificada para establecer el ancho, estilo y color en una sola declaración.
outline-color	Propiedad que establece el color del contorno.
outline-offset	Propiedad que establece el espacio entre el contorno y el borde del elemento.
outline-style	Propiedad que establece el estilo del contorno.
outline-width	Propiedad que establece el ancho del contorno.