CSS border-color Property

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!