border-color Archives

The CSS border-color property settles the color of an element’s four borders.

The CSS border-color property can have from one to four values (top border, right border, bottom border, left border).

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.one-value {
  border-style: solid;
  border-color: #2a9d8f;
}

.two-values {
  border-style: solid;
  border-color: #e76f51 #2a9d8f;
}

.three-values {
  border-style: solid;
  border-color: #e76f51 #e9c46a #2a9d8f;
}

.four-values {
  border-style: solid;
  border-color: #e76f51 #e9c46a #2a9d8f #f4a261;
}
</style>
</head>
<body>

<div class="one-value">One-colored border!</div>
<br>

<div class="two-values">Two-colored border!</div>
<br>

<div class="three-values">Three-colored border!</div>
<br>

<div class="four-values">Four-colored border!</div>

</body>
</html>

Output:

One-colored border!

Two-colored border!

Three-colored border!

Four-colored border!

Syntax:

border-color: color|transparent;

color – defines a border color.

transparent – defines that the border color is transparent.

Example2:

If the CSS border-color property has one value, all four borders will have one color:

<!DOCTYPE html>
<html>
<head>
<style>
.one-value {
  border-style: solid;
  border-color: #2a9d8f;
}

</style>
</head>
<body>

<div class="one-value">One-colored border!</div>

</body>
</html>

Output:

One-colored border!

Example3:

If the CSS border-color property has two values, the top and bottom borders will have different color, then the right and left borders:

<!DOCTYPE html>
<html>
<head>
<style>

.two-values {
  border-style: solid;
  border-color: #e76f51 #2a9d8f;
}

</style>
</head>
<body>

<div class="two-values">Two-colored border!</div>

</body>
</html>

Output:

Two-colored border!

Example4:

If the CSS border-color property has three values:

<!DOCTYPE html>
<html>
<head>
<style>

.three-values {
  border-style: solid;
  border-color: #e76f51 #e9c46a #2a9d8f;
}
</style>
</head>
<body>

<div class="three-values">Three-colored border!</div>

</body>
</html>

Output:

Three-colored border!

Example5:

If the CSS border-color property has four values, each border will have a different color:

<!DOCTYPE html>
<html>
<head>
<style>

.four-values {
  border-style: solid;
  border-color: #e76f51 #e9c46a #2a9d8f #f4a261;
}
</style>
</head>
<body>

<div class="four-values">Four-colored border!</div>

</body>
</html>

Output:

Four-colored border!

Enjoy coding!