Border Color
CSS Border Color
The four borders’ colors can be adjusted using the border-color attribute.
You can set the color by:
- name—give a name to the color, such as “red”
- HEX: Enter a hexadecimal value, such as “#ff0000”.
- RGB: Enter an RGB value here, e.g., “rgb(255,0,0)”.
- HSL: Enter a value in the format “hsl(0, 100%, 50%)”.
- clear
Note: The color of the element is inherited if border-color is left empty.
Example
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;
border-color: blue;
}
Result:
Red border
Green border
Blue border
Specific Side Colors
For the top border, right border, bottom border, and left border, the border-color attribute can have one to four values.
Example
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
HEX Values
Hexadecimal values (HEX) can also be used to specify the border’s color:
Example
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
RGB Values
Alternatively, by employing RGB values:
Example
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
HSL Values
Moreover, HSL values can be used:
Example
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}
