border-color
The border-color property is used for setting the color of borderlines. To show borderlines, you also need to set the border-style properly.
Property Values
You can set property values using color code (HEX, RGB, or RGBA) or keyword (color name). Using RGBA, you can also set translucent borders.
Multiple Values
Like border-style, you can set multiple values to set border-color. The rules are the same as the ones for border-style.
When you set only one value, the color is applied to all sides of the borderline. By setting multiple values, you can set different borderline colors for each side of the element.
Two values
- The first value is applied to the top and bottom borders.
- The second value is applied to the right and left borders.
Three values
- The first value is applied to the top border.
- The second value is applied to the right and left borders.
- The third value is applied to the bottom border.
Four values
Using four values, you can specify the color of each of the four borders. The property values are set based on clockwise order starting from the top.
- The first value is applied to the top border.
- The second value is applied to the right border
- The third value is applied to the bottom border.
- The fourth value is applied to the left border.
Practice
Objective:
Practice to set different border colors with different numbers of values
1. Update the body section of the HTML file
Add the code below in the body section of the chapter13.html file. We are adding the bg-border class to set the size and shape of each box with solid borderlines as a base object style. The code for the styling will be explained in the next step.
We also add borderline colors to the base object using the style attribute of each element so that we can customize the border color for each element. This part of the CSS code is written in the HTML file below.
<h2>Border Color</h2>
<div class="bg-border" style="border-color: red;"><b>1 Value</b>: Red</div>
<div class="bg-border" style="border-color: red green;"><b>2 Values</b>: Red Green</div>
<div class="bg-border" style="border-color: red green blue;"><b>3 Values</b>: Red Green Blue</div>
<div class="bg-border" style="border-color: red green blue yellow"><b>4 Values</b>: Red Green Blue Yellow</div>
<hr>
2. Update the CSS file
Open the practice.css file and add new code for adding styles to the bg-border class.
.bg-border{
width: 300px;
height: 100px;
margin: 10px;
padding: 10px;
background-color: #B3EBEF;
border-style: solid;
box-sizing: border-box;
}
3. Check the result with a browser
- Open chapter13.html with a browser.
- You can see how different border colors are set with multiple property values.
You can also check the sample result here (Demo Site).
You can also learn this topic offline. Click 
.
More Topics to Explore
Box-Shadow vs. Drop-Shadow: How They Are Different?
Attribute Selector in CSS
flex-wrap
