Loading lesson path
Overview
Formula
The border - color property is used to set the color of the four borders.The color can be set by:
Formula
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"transparent
Formula
If border - color is not set, it inherits the color of the element.Demonstration of the different border colors: p.one
{
border-style: solid;
border-color: red;
}p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;Formula
border - color:blue;
}The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
Example p.one {
border-style: solid;
border-color: red green blue yellow;/* red top, green right, blue bottom and yellow left */
}The color of the border can also be specified using a hexadecimal value (HEX):
Example p.one {
border-style: solid;
border-color: #ff0000; /* red*/
}Example p.one {
border-style: solid;
border-color: rgb(255, 0, 0);/* red */
}You can also use HSL values:
Example p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);/* red */
}You can learn more about HEX, RGB and HSL values in our CSS Colors chapters.