The border-color
property is used for setting the color of borderlines. To show borderlines, you also need to set the border-style
properly.
You can set property values using color code (HEX, RGB, or RGBA) or keyword (color name). Using RGBA, you can also set translucent borders.
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.
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.
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>
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;
}
You can also check the sample result here (Demo Site ).
The border-color
property is used for setting the color of borderlines. To show borderlines, you also need to set the border-style
properly.
You can set property values using color code (HEX, RGB, or RGBA) or keyword (color name). Using RGBA, you can also set translucent borders.
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.
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.
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>
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;
}
You can also check the sample result here (Demo Site ).