In this tutorial, you will learn-

CSS Border Color

The CSS border-color property defines the color of the border of a box.


CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

• name – specify a color name, similar to “red”

• HEX – specify a HEX value, as “#ff0000”

• RGB – specify a RGB value, as “rgb(255,0,0)”

• HSL – specify a HSL value, as “hsl(0, 100%, half)”

Note: If border-color is not set, it inherits the color of the element.

Example
Demonstration of the different border colors:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
} 

p.three {
  border-style: dotted;
  border-color: blue;
} 
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>

Result

The border-color Property

This property specifies the color of the four borders:

A solid red border

A solid green border

A dotted blue border

Note: The “border-color” property does not work if it is used alone. Use the “border-style” property to set the borders first.


Specific Side Colors

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>

<p class="one">A solid multicolor border</p>

</body>
</html>

The border-color Property

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border):

A solid multicolor border


HEX Values

The value of the border can likewise be specified using a hexadecimal value (HEX):

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

p.two {
  border-style: solid;
  border-color: #0000ff; /* blue */
}

p.three {
  border-style: solid;
  border-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>The color of the border can also be specified using a hexadecimal value (HEX):</p>

<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>

</body>
</html>

The border-color Property

The color of the border can also be specified using a hexadecimal value (HEX):

A solid red border

A solid blue border

A solid grey border


RGB Values

Or by using RGB values:

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}

p.two {
  border-style: solid;
  border-color: rgb(0, 0, 255); /* blue */
}

p.three {
  border-style: solid;
  border-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>The color of the border can also be specified using RGB values:</p>

<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>

</body>
</html>

The border-color Property

The color of the border can also be specified using RGB values:

A solid red border

A solid blue border

A solid grey border


HSL Values

You can also use HSL values:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}

p.two {
  border-style: solid;
  border-color: hsl(240, 100%, 50%); /* blue */
}

p.three {
  border-style: solid;
  border-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>The color of the border can also be specified using HSL values:</p>

<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>

</body>
</html>

The border-color Property

The color of the border can also be specified using HSL values:

A solid red border

A solid blue border

A solid grey border


You can learn more about HEX, RGB and HSL values in our CSS Colors chapters.


Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder