Color del borde CSS
Color del borde CSS
La border-color
propiedad se utiliza para establecer el color de los cuatro bordes.
El color se puede configurar mediante:
- nombre - especifique un nombre de color, como "rojo"
- HEX: especifique un valor HEX, como "#ff0000"
- RGB: especifica un valor RGB, como "rgb(255,0,0)"
- HSL: especifique un valor HSL, como "hsl(0, 100%, 50%)"
- transparente
Nota: si border-color
no se establece, hereda el color del elemento.
Ejemplo
Demostración de los diferentes colores de borde:
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color:
blue;
}
Resultado:
Red border
Green border
Blue border
Colores laterales específicos
La border-color
propiedad puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).
Ejemplo
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
Valores hexadecimales
El color del borde también se puede especificar mediante un valor hexadecimal (HEX):
Ejemplo
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}
Valores RGB
O usando valores RGB:
Ejemplo
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}
Valores HSL
También puede usar valores HSL:
Ejemplo
p.one {
border-style: solid;
border-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 .