Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
outline-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
La propiedad CSSoutline-color establece el color del contorno de un elemento.
Pruébalo
outline-color: red;outline-color: #32a1ce;outline-color: rgba(170, 50, 220, 0.6);outline-color: hsla(60, 90%, 50%, 0.8);outline-color: currentcolor;<section> <div> This is a box with an outline around it. </div></section>#example-element { outline: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}Sintaxis
/* Valores de <color> */outline-color: #f92525;outline-color: rgb(30, 222, 121);outline-color: blue;/* Valor de palabra clave */outline-color: invert;/* Valores globales */outline-color: inherit;outline-color: initial;outline-color: revert;outline-color: revert-layer;outline-color: unset;La propiedadoutline-color se especifica como cualquiera de los valores enumerados a continuación.
Valores
Descripción
Un contorno es una línea que se dibuja alrededor de un elemento, fuera deborder. A diferencia del borde del elemento, el contorno se dibuja fuera del marco del elemento y puede superponerse a otro contenido. El borde, por otro lado, en realidad alterará el diseño de la página para asegurarse de que encaje sin superponerse con nada más (a menos que lo establezca explícitamente para que se superponga).
Suele ser más conveniente usar la propiedad abreviadaoutline al definir la apariencia de un contorno.
Problemas de accesibilidad
Losestilos de enfoque personalizados normalmente implican realizar ajustes en la propiedadoutline. Si se ajusta el color del contorno, es importante asegurarse de que la relación de contraste entre este y el fondo sobre el que se coloca el contorno sea lo suficientemente alta como para que las personas con problemas de visión puedan percibirlo.
La relación de contraste de color se determina comparando la luminosidad del texto y los valores de color de fondo. Para cumplir con lasDirectrices de Accesibilidad al Contenido Web (WCAG) actuales, se requiere una proporción de 4.5:1 para el contenido de texto y de 3:1 para textos más grandes, como los encabezados. El texto grande se define como 18.66 px y ennegrita o más grande, o 24 px o más.
Definicion formal
| Valor inicial | auto |
|---|---|
| Applies to | all elements |
| Heredable | no |
| Valor calculado | For the keywordauto, the computed value iscurrentcolor. For the color value, if the value is translucent, the computed value will be thergba() corresponding one. If it isn't, it will be thergb() corresponding one. Thetransparent keyword maps torgba(0,0,0,0). |
| Animation type | acolor |
Sintaxis formal
outline-color =
auto|
<'border-top-color'>
<border-top-color> =
<color>|
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes(<color-stripe>#)
<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?
<length-percentage> =
<length>|
<percentage>
Ejemplo
Establecer un contorno azul sólido
HTML
<p>Como puedes ver, mi contorno es azul.</p>CSS
p { outline: 2px solid; /* Establecer el ancho y el estilo del contorno */ outline-color: #0000ff; /* Hacer el contorno azul */ margin: 5px;}Resultado
Especificaciones
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-color |
Compatibilidad con navegadores
Véase también
outlineoutline-coloroutline-styleoutline-width- El tipo de dato
<color> - Otras propiedades relacionadas con el color:
color,background-color,border-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color, ycolumn-rule-color - Aplicar color a elementos HTML usando CSS