CSS border-color property
The border-color property in CSS asserts the border color of an element. Each of the sides may be set distinctively using 'border-top-color', 'border-bottom-color', 'border-right-color' and the 'border-left-color'.
The syntax for the border-color property in CSS-
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>
The syntax for the horizontal or vertical values-
border-color: red #f015ca;
Syntax for the top, vertical and bottom value-
border-color: black rgb(240,30,50,.7) red;
The syntax for the top, right, bottom, left value-
border-color: red yellow green blue;
CSS border-color property Example using all types of values-
Here in the example below, we are using the border-color property with different border colours, border styles and their different values. In this case, we have given the border-color of the object using all the values of this property. The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colours or styles or variants, etc. The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags. And within the 'body' tag, you are required to give the text, paragraphs, etc.
<!DOCTYPE html>
<head>
<title>Border-color property in CSS</title>
<style type="text/css">
#justone {
border-color: red;
}
#horzvert {
border-color: gold red;
}
#topvertbott {
border-color: red cyan gold;
}
#trbl {
border-color: red cyan black gold;
}
div {
border: solid 2em;
width: auto;
margin: 2em;
padding: 2em;
}
ul {
margin: 0;
list-style: none;
}
</style>
</head>
<body>
<div id="justone"></div>
<div id="horzvert"></div>
<div id="topvertbott"></div>
<div id="trbl"></div>
</body>
</html>
Output-
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
4 |
4 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
4 |
4 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion-
The initial value for the 'border-top-color', 'border-right-color', 'border-bottom-color' and 'border-left-color' is 'currentcolor'. This property is applicable to all elements and also to '::first-letter'. It is not an inherited property. The computed value for all the properties of the border-color property is the computed color. And the animation type of all the constituent properties of this property is a color.
