Set color-value by name
All the 140 valid CSS color names can be assigned to the border color.
Syntax:
border-color: blue;
Example: This example illustrates the border-color property by setting the color using the name value.
<!DOCTYPE html>
<html>
<head>
<title>CSS border-color property</title>
<style>
h1 {
color: #009900;
}
p.one {
border-style: solid;
border-color: blue;
}
p.two {
border-style: solid;
border-color: blue red yellow green;
}
p.three {
border-style: solid;
color: green;
}
</style>
</head>
<body>
<h1 align="center">w3wiki</h1>
<p class="one">A solid blue border</p>
<p class="two">A solid multicolor border</p>
<p class="three">A solid inherited color 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.