Color de contorno CSS
Color de contorno CSS
La outline-color
propiedad se utiliza para establecer el color del contorno.
El color se puede configurar mediante:
- nombre - especifique un nombre de color, como "rojo"
- HEX: especifique un valor hexadecimal, como "#ff0000"
- RGB: especifica un valor RGB, como "rgb(255,0,0)"
- HSL: especifique un valor HSL, como "hsl(0, 100%, 50%)"
- invertir: realiza una inversión de color (lo que garantiza que el contorno sea visible, independientemente del color de fondo)
El siguiente ejemplo muestra algunos contornos diferentes con diferentes colores. Observe también que estos elementos también tienen un borde negro delgado dentro del contorno:
Un contorno rojo sólido.
Un contorno azul punteado.
Un contorno gris inicial.
Ejemplo
p.ex1
{
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2
{
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3
{
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
Valores hexadecimales
El color del contorno también se puede especificar mediante un valor hexadecimal (HEX):
Ejemplo
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}
Valores RGB
O usando valores RGB:
Ejemplo
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*
red */
}
Valores HSL
También puede usar valores HSL:
Ejemplo
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}
Puede obtener más información sobre los valores HEX, RGB y HSL en nuestros capítulos de colores CSS .