CSS - border-color



The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties −

Possible Values

  • <color> − Any valid color value.

  • transparent − Sets the border to be invisible.

Applies to

All the HTML elements.

Syntax

object.style.borderColor = "red";
Always declare the border-style property before the border-color property.

CSS border-color - <color> Value

Here is the example which shows effect of all these properties −

<html>
<head>
<style>
   p.example1 {
      border:1px solid;
      border-bottom-color:#009900; /* Green */
      border-top-color:#FF0000;    /* Red */
      border-left-color:#330000;   /* Black */
      border-right-color:#0000CC;  /* Blue */
   }
   p.example2 {
      border:1px solid;
      border-color:#009900;        /* Green */
   }
</style>
</head>
<body>
   <p class = "example1">
      This example is showing all borders in different colors.
   </p>

   <p class = "example2">
      This example is showing all borders in green color only.
   </p>
</body>
</html>

CSS border-color - With Four Value

The border-color property can have four values, three values, two values or one value as demonstrated in the following example:

<html>
<head>
<style>
   p.example1 {
      border:4px solid;
      border-color:red blue green yellow;
   }
   p.example2 {
      border:4px solid;
      border-color:red blue green;
   }
   p.example3 {
      border:4px solid;
      border-color:alice aqua;
   }
   p.example4 {
      border:4px solid;
      border-color:red;
   }
</style>
</head>
<body>
   <p class = "example1">
      <i>border-color</i> with four different values.
   </p>
   <p class = "example2">
      <i>border-color</i> with three different values.
   </p>
   <p class = "example3">
      <i>border-color</i> with two different values.
   </p>
   <p class = "example4">
      <i>border-color</i> with one value.
   </p>
</body>
</html>

CSS border-color - With Any Type of Color Value

We can pass any type of color value, from named colors to hexadecimal, RGB and RGBA values as demonstrated below −

<html>
<head>
<style >
   p {
      border-style: solid; border-width: thick;
      border-color: green rgb(201, 76, 76) #808080 rgba(201, 76, 76, 0.3);
   }
</style>
</head>
<body>
   <p class = "example1">
      <i>border-color</i> with four different color types (named, RGB ,hex, RGBA)!!
   </p>
</body>
</html>
Advertisements