CSS - border-color Property

Previous
Quiz
Next

CSS border-color property lets you set the color of an element's four borders. You can specify different colors for each border side based on the number of values provided. The border-style must be defined.

Syntax

border-color: color | transparent | initial | inherit;

Property Values

Value Description
color It specifies the color of border. Different color formats can be used (names,rgb values,hex values,hsl values etc.). Default color is the current color of the element.
transparent It specifies that the border must be transparent.
initial This sets the property to its default value.
inherit This inherits the property from the parent element.

Examples of CSS Border Color Property

The following examples explain the border-color property with different values.

Border Color using Color Names

The color of the border can be set using color names. In the following example, different number of color values have been given and border colors have been set using color names.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      #one {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: red;
      }

      #two {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: red blue;
      }

      #three {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: red green blue;
      }

      #four {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: red green orange blue;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-color property
   </h2>
   <p id="one">
      This example is showing all borders in a single color.
   </p>

   <p id="two">
      This example is showing all borders 
      in two different colors.
   </p>
   <p id="three">
      This example is showing all borders 
      in three different colors.
   </p>
   <p id="four">
      This example is showing all borders 
      in four different colors.
   </p>
</body>

</html>

Border Color using Hexadecimal Values

The color of the border can be set using hexadecimal values. In the following example, different number of color values have been given and border colors have been set using hexadecimal values.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      #one {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: #33cc33;
      }

      #two {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: #33cc33 #ff6600;
      }

      #three {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: #33cc33 #ffff66 #ff6600;
      }

      #four {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: #33cc33  #ffff66 #669900 #ff6600;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-color property
   </h2>
   <p id="one">
      This example is showing all borders in a single color.
   </p>

   <p id="two">
      This example is showing all borders 
      in two different colors.
   </p>
   <p id="three">
      This example is showing all borders 
      in three different colors.
   </p>
   <p id="four">
      This example is showing all borders 
      in four different colors.
   </p>
</body>

</html>

Border Color using RGB Values

The color of the border can be set using rgb values. In the following example, different number of color values have been given and border colors have been set using rgb values.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      #one {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: rgb(204, 51, 255);
      }

      #two {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: rgb(204, 51, 255) rgb(255, 80, 80);
      }

      #three {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: rgb(204, 51, 255) rgb(102, 0, 255) 
         rgb(255, 80, 80);
      }

      #four {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: rgb(204, 51, 255)  rgb(102, 0, 255) 
         rgb(102, 0, 102) rgb(255, 80, 80);
      }
   </style>
</head>

<body>
   <h2>
      CSS border-color property
   </h2>
   <p id="one">
      This example is showing all borders 
      in a single color.
   </p>

   <p id="two">
      This example is showing all borders 
      in two different colors.
   </p>
   <p id="three">
      This example is showing all borders 
      in three different colors.
   </p>
   <p id="four">
      This example is showing all borders 
      in four different colors.
   </p>
</body>

</html>

Border Color using HSL Values

The color of the border can be set using hsl values. In the following example, different number of color values have been given and border colors have been set using hsl values.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      #one {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: hsl(195, 100%, 40%);
      }

      #two {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: hsl(195, 100%, 40%) hsl(330, 50%, 40%);
      }

      #three {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: hsl(195, 100%, 40%) hsl(24, 100%, 50%) 
         hsl(330, 50%, 40%);
      }

      #four {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: hsl(195, 100%, 40%)  hsl(24, 100%, 50%) 
         hsl(30, 100%, 40%) hsl(330, 50%, 40%);
      }
   </style>
</head>

<body>
   <h2>
      CSS border-color property
   </h2>
   <p id="one">
      This example is showing all borders 
      in a single color.
   </p>

   <p id="two">
      This example is showing all borders 
      in two different colors.
   </p>
   <p id="three">
      This example is showing all borders 
      in three different colors.
   </p>
   <p id="four">
      This example is showing all borders 
      in four different colors.
   </p>
</body>

</html>

Note: Different number of values affect the border color property differently.

  • One value: if one color value is given, then it is applied to all the four borders.
  • Two values: if two values are given, then the first color is applied to top and bottom borders and the second color to left and right borders.
  • Three values: if three values are given, first color is for top border, second color for left and right borders and third color for bottom border.
  • Four values: if four values are given, first color is for top border, second color for right border, third color for bottom borders and fourth for left border.

Border Color using Transparent Value

To have transparent borders, we use the transparent value. In the following example, transparent value has been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      #transparent {
         background-color:grey;
         padding: 15px;
         border: 5px solid;
         border-color: transparent;
      }

      
   </style>
</head>

<body>
   <h2>
      CSS border-color property
   </h2>
   <p id="transparent">
      This example shows transparent borders.
   </p>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
border-color 1.0 4.0 1.0 1.0 3.5
css_reference.htm
Print Page
Previous
Next
Advertisements