Set color-value by HEX
HEX color value can be assigned to the border color. The pair of values in #rrggbb represent RGB values in the hexadecimal system.
Syntax:
border-color: #0000ff;
Example: This example illustrates the border-color property by setting the color using the hexadecimal value.
<!DOCTYPE html>
<html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #0000ff #ff0000 #ffff00 #00ff00;
}
</style>
</head>
<body>
<h1 align="center">w3wiki</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
</body>
</html>
Output:
CSS border-color Property
The border-color property in CSS is used to set the color of an element’s border. It only works when the border-style property is defined, as border-color alone does not render a visible border. The property can accept one to four values, corresponding to the top, right, bottom, and left borders, respectively. If not explicitly set, the border color inherits the element’s color.
Syntax:
border-color: color-value;
Default Value : The current color of the element
Property values: Where color-value can be any of the following:
- name: It specifies a color name, like “blue”.
- Hex: It specifies a hex value, like “#0000ff”.
- RGB: It specifies a RGB value, like “rgb(0, 0, 255)”.
- transparent: It sets the border color of the corresponding element to transparent.