22-Contornos en css

---

Contornos en CSS

• Contornos en CSS
• Propiedades de contorno en CSS
  • outline-color
  • outline-style
  • outline-width
  • outline-offset
  • outline
• Estilos de los contornos en CSS

---

Contornos en CSS

En CSS, el contorno es una línea que rodea el borde de un elemento y se dibuja por fuera del mismo. A diferencia del borde, el contorno no afecta el tamaño del elemento, por lo que no modifica el flujo del contenido en la página. Esto significa que, aunque el contorno se visualiza alrededor del elemento, no ocupa espacio en el diseño.

El contorno es particularmente útil para resaltar elementos de forma temporal, como cuando se utiliza en campos de formularios que requieren validación o en enlaces activos que se enfocan mediante el teclado.

El contorno se puede personalizar mediante diferentes propiedades de CSS, como el color, el estilo y el grosor. A continuación, exploraremos las propiedades más comunes de los contornos en CSS:

• outline-color: Define el color del contorno.
• outline-style: Establece el estilo de la línea del contorno (punteado, sólido, doble, etc.).
• outline-width: Controla el grosor del contorno.
• outline-offset: Ajusta la distancia entre el contorno y el borde del elemento.
• outline: Es una propiedad abreviada que permite definir color, estilo y grosor en una sola declaración.

Ejemplo de contorno aplicado en un párrafo:

Este párrafo tiene un borde negro de 2px y un contorno punteado de 5px en verde.

---

...

Propiedades de contorno en CSS

Las propiedades de contorno en CSS permiten personalizar el estilo de los contornos que rodean los elementos HTML. A continuación se describen las propiedades principales que se pueden utilizar para modificar un contorno:

• outline-color: Esta propiedad define el color del contorno. Puede ser cualquier valor de color válido en CSS (nombre del color, hexadecimal, RGB, etc.).
• outline-style: Establece el estilo del contorno. Los valores comunes incluyen:
  • dotted: Contorno punteado.
  • dashed: Contorno discontinuo.
  • solid: Contorno sólido.
  • double: Contorno doble.
  • groove, ridge, inset, outset: Estilos en 3D que dependen del color del contorno para simular profundidad.
  • none: Sin contorno.
• outline-width: Controla el grosor del contorno, con valores en unidades absolutas (como px) o relativas (como em).
• outline-offset: Ajusta la distancia entre el contorno y el borde del elemento. Permite separar visualmente el contorno del elemento al que rodea.
• outline: Propiedad abreviada que combina outline-color, outline-style y outline-width en una sola declaración.

Ejemplo de un contorno con propiedades combinadas:

Este párrafo tiene un borde negro de 2px, un contorno rojo punteado de 4px y un offset de 5px.

---

outline-color

La propiedad outline-color define el color del contorno de un elemento en CSS. Este contorno se dibuja fuera del borde del elemento y no afecta el tamaño total ni la disposición del elemento en la página.

Algunos valores para outline-color incluyen:

• Nombres de colores: red, blue, green, etc.
• Colores hexadecimales: #4CAF50, #FF5733, etc.
• Valores RGB/RGBA: rgb(76, 175, 80) o rgba(76, 175, 80, 0.8) (este último permite transparencia).
• CurrentColor: Usa el color actual del elemento, por ejemplo, el color del texto.

Ejemplo visual:

Este elemento tiene un borde negro de 2px y un contorno verde de 4px.

---

outline-style

La propiedad outline-style define el estilo de la línea del contorno alrededor de un elemento en CSS. Funciona de forma similar a border-style y permite una variedad de estilos que añaden efectos visuales al contorno.

Valores de outline-style:

• dotted: Define un contorno punteado.
• dashed: Define un contorno discontinuo.
• solid: Define un contorno sólido.
• double: Define un contorno de doble línea.
• groove: Define un contorno en relieve 3D.
• ridge: Define un contorno de cresta 3D.
• inset: Define un contorno de inserción en 3D.
• outset: Define un contorno saliente en 3D.
• none: No define ningún contorno.

Ejemplo visual:

Este elemento tiene un borde negro de 2px y un contorno punteado azul de 5px.

---

outline-width

La propiedad outline-width especifica el grosor del contorno de un elemento en CSS. Funciona de forma similar a border-width y permite controlar el ancho del contorno alrededor de un elemento, independientemente del borde.

Valores de outline-width:

• thin: Define un contorno delgado.
• medium: Define un contorno de grosor medio (valor predeterminado).
• thick: Define un contorno grueso.
• Medidas específicas: También se puede especificar en píxeles, rems u otras unidades, como 5px o 0.2rem.

Ejemplo visual:

Este elemento tiene un borde negro de 2px y un contorno verde sólido de 10px de ancho.

---

outline-offset

La propiedad outline-offset en CSS define la distancia entre el borde de un elemento y su contorno. Este desplazamiento permite que el contorno no se dibuje directamente sobre el borde, sino a una distancia específica del mismo, creando un efecto de separación.

Valores de outline-offset: Cualquier medida válida en CSS, como píxeles (px), rems (rem), porcentajes, etc.

Ejemplo visual:

Este elemento tiene un borde negro de 2px, un contorno naranja sólido de 5px y un desplazamiento de contorno de 10px.

---

outline

La propiedad outline en CSS es una propiedad abreviada que permite definir el color, el estilo y el ancho del contorno en una sola línea. A diferencia del borde, el contorno no afecta el flujo del documento, ya que se dibuja fuera del borde del elemento.

Sintaxis: outline: <color> <style> <width>

Ejemplo:

Este elemento tiene un borde negro de 2px y un contorno verde sólido de 5px.

Propiedades individuales: La propiedad outline combina las propiedades outline-color, outline-style y outline-width en una sola línea.

---

Estilos de los contornos en CSS

La propiedad outline-style en CSS permite definir diferentes estilos para los contornos de un elemento. Esta propiedad puede tener varios valores que afectan cómo se dibuja el contorno alrededor del elemento.

Valores de outline-style:

• dotted: Un contorno punteado.
• dashed: Un contorno discontinuo.
• solid: Un contorno sólido.
• double: Un contorno doble.
• groove: Un contorno ranurado en 3D.
• ridge: Un contorno estriado en 3D.
• inset: Un contorno de inserción en 3D.
• outset: Un contorno inicial en 3D.
• none: No se dibuja contorno.
• hidden: Contorno oculto.

Ejemplo de contornos con diferentes estilos:

Contorno punteado verde

Contorno discontinuo rojo

Contorno sólido amarillo

Contorno ranurado en 3D morado

Estos estilos de contorno pueden combinarse con otras propiedades, como el color, el grosor y el desplazamiento del contorno, para personalizar aún más el diseño.

---

Ir al índice

---

---