The border-inline-color property in CSS is used to set the individual logical inline border-color property values in a single place in the style sheet. It sets the border color top, and bottom of the defining border element.
Syntax:
border-inline-color: color;
Property values:
- color: This property holds the color of the border.
Below examples illustrate the border-inline-color property in the CSS:
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-inline-color Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 220px;
height: 40px;
}
.one {
border: 5px solid cyan;
border-inline-color: yellow;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | border-inline-color Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
|
Output:
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-inline-color Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 220px;
height: 40px;
}
.one {
border: 5px dotted cyan;
border-inline-color: yellow;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | border-inline-color Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
|
Output:
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-color#:~:text=The%20border%2Dinline%2Dcolor%20CSS,%2C%20directionality%2C%20and%20text%20orientation.
Supported Browsers: The browser supported by border-inline-color property are listed below: