The border color is a CSS property that is used to apply color to the border of an HTML element. The color between the padding and the margin of an HTML element is called the border color.
It is important to know that to use the border-color property. You need to define a border-style property first, which means more than the border-color property alone will be needed.
When dealing with HTML elements, you can choose to define border properties individually for each side: top, bottom, left, and right. It's possible to assign a uniform color to all sides or define unique colors for each side as needed.
Syntax of CSS Border Color
border-color: transparent| color| inherit| initial;
Assigning a border color to an HTML element enhances its appearance and contributes to the overall visual appeal of the website.
When considering how to design a border, one of the primary aspects to focus on is color, a fundamental component in the toolbox of every designer. Color plays a significant role in user experience, underscoring its importance in border styling. Now, let's delve into the various CSS color formats available for specifying colors.
CSS Color Format
Different color schemes are employed to specify the border color. The schemes include:
Standard color names:
The predefined colors in CSS are referred to as standard color names, like "violet," "aqua," "indigo," and others.
Code:
border-color: orange;
RGB value:
RGB stands for Red, Green, and Blue. The strength of colors is determined by employing whole numbers ranging from 0 to 255 for every color element.
Code:
border-color: rgb(100, 250, 200);
RGBA (Red, Green, Blue, Alpha) value:
RGBA stands for Red, Green, Blue, and Alpha, representing a color model closely related to RGB. In RGBA, the levels of colors are defined using whole numbers ranging from 0 to 255 for the initial three components. Additionally, RGBA includes a fourth parameter known as "Alpha," which varies between 0 and 1. This "Alpha" parameter determines the level of transparency of the color.
Code:
border-color: rgba(66, 204, 150, 0.6);
Hexadecimal (Hex) value:
Hexadecimal color codes consist of six alphanumeric characters (#RRGGBB) that specify the levels of red, green, and blue in a color.
Code:
border-color: #ff00cc;
3-digit Hexadecimal (Hex) value:
It serves as an abbreviated representation for certain six-digit hexadecimal values.
Code:
border-color: #f0c;
HSL value:
HSL stands for Hue, Saturation, and Lightness. The Hue value ranges from 0 to 360 degrees, while both the Saturation and Lightness values range from 0% to 100%.
border-color: hsl(250, 75%, 60%);
HSLA value:
HSLA stands for Hue, Saturation, Lightness, and Alpha, which is an extension of the HSL model with an extra parameter for transparency known as "Alpha" that varies between 0 and 1.
Code:
border-color: hsla(150, 72%, 42%, 0.6);
CSS Border Color for Individual Sides
We have the ability to define border colors for specific sides of an HTML element by utilizing the properties border-left-color, border-right-color, border-top-color, and border-bottom-color. These properties provide the flexibility to assign distinct colors to each border side of an HTML element.
Syntax 1:
border-top-color: color-name;
It specifies the border color from the top.
Syntax 2:
border-right-color: color-name;
It specifies the border color from the right.
Syntax 3:
border-bottom-color: color-name;
It specifies the border color from the bottom.
Syntax 4:
border-left-color: color-name;
It specifies the border color from the left.
Example to demonstrate the CSS border color for individual sides:
In this instance, we are going to utilize conventional color names to define various aspects of an HTML element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of the CSS border-color for individual sides</title>
<style>
h1 {
text-align: center;
}
p {
padding: 10px;
margin: 10px;
border-style: solid;
text-align: center;
font-size: 18px;
border-width: 6px;
}
.top {
border-top-color: violet;
}
.right {
border-right-color: palevioletred;
}
.bottom {
border-bottom-color: lawngreen;
}
.left {
border-left-color: orange;
}
.all-sides {
border-top-color: violet;
border-right-color: palevioletred;
border-bottom-color: lawngreen;
border-left-color: orange;
}
</style>
</head>
<body>
<h1>Example to demonstrate the CSS border color for individual sides</h1>
<p class="top">
It specifies the color of the border from the top.
</p>
<p class="right">
It specifies the color of the border from the right.
</p>
<p class="bottom">
It specifies the color of the border from the bottom.
</p>
<p class="left">
It specifies the color of the border from the left.
</p>
<p class="all-sides">
It specifies the different colors of the border from all sides.
</p>
</body>
</html>
Output:
CSS Border Color Shorthand Properties
In this instance, we will utilize common color names to define the border color of an HTML element by employing shorthand properties.
Syntax 1:
border-color: color-name;
The aforementioned syntax applies an identical color to all edges of an HTML element.
Syntax 2:
border-color: top-bottom-border-color right-left-border-color;
The syntax above sets identical top and bottom border colors, as well as left and right border colors, for an HTML element.
Syntax 3:
border-color: top border-color right-left-border-color bottom- border-color;
The preceding syntax pertains to an HTML element featuring a distinct border color at the top, identical border colors on the right and left sides, and a disparate border color at the bottom.
Syntax 4:
border-color: top-border-color right-border-color bottom-border-color left-border-color;
The syntax mentioned above is utilized to assign various colors to all edges of an HTML element.
Example to demonstrate the CSS border color using shorthand properties:
In this instance, we'll employ common color names to define the border color using CSS shorthand attributes of an HTML element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of the CSS border-color shorthand properties</title>
<style>
h1 {
text-align: center;
}
p {
margin: 10px;
padding: 10px;
font-size: 15px;
font-family: 'Courier New', Courier, monospace;
border-style: solid;
border-width: 9px;
text-align: center;
}
.paragraph-1 {
border-color: blue;
}
.paragraph-2 {
border-color: brown pink;
}
.paragraph-3 {
border-color: brown pink orange;
}
.paragraph-4 {
border-color: brown pink orange green;
}
</style>
</head>
<body>
<h1>Example to demonstrate the CSS border-color shorthand properties</h1>
<div>
<p class="paragraph-1">In paragraph-1, the same border color has been applied on all sides.</p>
</div>
<div>
<p class="paragraph-2">In paragraph-2, the color of the top and bottom borders are the same, and the color of the right and left borders are the same.</p>
</div>
<div>
<p class="paragraph-3">In paragraph 3, a different border color has been applied at the top, the same border color has been applied on the left and right, and a different border color has been applied at the bottom.</p>
</div>
<div>
<p class="paragraph-4">In paragraph-4, different border colors are applied to the top, right, bottom, and left borders at the same time.</p>
</div>
</body>
</html>
Output:
Using RGB (Red, Green, Blue) and RGBA (Red, Green, Blue, Alpha) color values to apply the border color:
We'll utilize RGB (Red, Green, Blue) and RGBA (Red, Green, Blue, Alpha) values to specify the border color of an HTML element.
Example to demonstrate the CSS border color using RGB and RGBA color values:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of the CSS border-color using RGB and RGBA color values</title>
<style>
h1 {
text-align: center;
}
p{
padding: 15px;
margin: 15px;
border-style: solid;
text-align: center;
font-size: 18px;
border-width: 18px;
}
.rgb1{
border-color: rgb(174, 166, 9);
}
.rgba1{
border-color: rgb(174, 166, 9, 0.6);
}
.rgb2{
border-color: rgb(60, 210, 152);
}
.rgba2{
border-color: rgb(60, 210, 152, 0.6);
}
</style>
</head>
<body>
<h1>Example to demonstrate the CSS border color using RGB and RGBA color values</h1>
<div>
<p class="rgb1">It specifies border color with RGB value.</p>
<p class="rgba1">It specifies border color with RGBA value.</p>
<p class="rgb2">It specifies border color with RGB value.</p>
<p class="rgba2">It specifies border color with RGBA value.</p>
</div>
</body>
Output:
Using HSL (Hue, Saturation, Lightness) and HSLA (Hue, Saturation, Lightness, Alpha) color values to apply the border color:
We will utilize HSL (Hue, Saturation, Lightness) and HSLA (Hue, Saturation, Lightness, Alpha) values to specify the border color of an HTML element.
Example to demonstrate the CSS border color using HSL and HSLA color values:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of the CSS border-color using HSL and HSLA color values</title>
<style>
h1 {
text-align: center;
}
p{
padding: 15px;
margin: 15px;
border-style: solid;
text-align: center;
font-size: 18px;
border-width: 18px;
}
.hsl1{
border-color: hsl(0, 100%, 50%);
}
.hsla1{
border-color: hsla(0, 100%, 50%, 0.5);
}
.hsl2{
border-color: hsl(306, 79%, 72%);
}
.hsla2{
border-color: hsla(306, 79%, 72%, 0.5);
}
</style>
</head>
<body>
<h1>Example to demonstrate the CSS border color using HSL and HSLA color values</h1>
<div>
<p class="hsl1">It specifies border color with HSL value.</p>
<p class="hsla1">It specifies border color with HSLA value.</p>
<p class="hsl2">It specifies border color with HSL value.</p>
<p class="hsla2">It specifies border color with HSLA value.</p>
</div>
</body>
</html>
Output:
Using Hexadecimal (Hex) and 3-digit Hexadecimal (Hex) color values to apply the border color:
We will utilize the Hexadecimal (Hex) notation and 3-digit Hexadecimal (Hex) values to specify the border color of an HTML element.
Example to demonstrate the CSS border color using the Hexadecimal (Hex) and the 3-digit Hexadecimal (Hex) color values:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of the CSS border color using hexadecimal and 3-digit hexadecimal color values</title>
<style>
h1 {
text-align: center;
}
p{
padding: 15px;
margin: 15px;
border-style: solid;
text-align: center;
font-size: 18px;
border-width: 18px;
}
.hex1{
border-color: #ee44bb;;
}
.hex2{
border-color: #e4b;
}
.hex3{
border-color: #33ffbb;
}
.hex4{
border-color: #3fb;
}
</style>
</head>
<body>
<h1>Example to demonstrate the CSS border color using hexadecimal and 3-digit hexadecimal color values</h1>
<div>
<p class="hex1">It specifies border color with hexadecimal value.</p>
<p class="hex2">It specifies border color with 3-digit hexadecimal value.</p>
<p class="hex3">It specifies border color with hexadecimal value.</p>
<p class="hex4">It specifies border color with 3-digit hexadecimal value.</p>
</div>
</body>
</html>
Output:
Conclusion
In this guide, you have been introduced to CSS border color, a CSS attribute utilized to specify the color of an HTML element's border.
You have gained knowledge about different color formats utilized for specifying color in CSS, including common color names, RGB color codes, RGBA color codes, hex color codes, 3-digit hex color codes, HSL color codes, and HSLA color codes.
You have observed various instances that demonstrate the application of a border color to an HTML element utilizing diverse color formats.