CSS Border Color

CSS Border Color

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

Colors can be set in the following ways:

  • name - Specify the color name, such as "red"
  • HEX - Specify the hexadecimal value, such as "#ff0000"
  • RGB - Specify the RGB value, such as "rgb(255,0,0)"
  • HSL - Specify the HSL value, such as "hsl(0, 100%, 50%)"
  • transparent

Note:If not set border-colorIf not set, it will inherit the color of the element.

Example

Demonstrate different border colors:

p.one {
  border-style: solid;
  border-color: red;
}
p.two {
  border-style: solid;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

Result:

Red solid border

Green solid border

Blue dotted border

Try It Yourself

Specific border color

border-color The property can be set to one to four values (used for the top border, right border, bottom border, and left border).

Example

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* Top red, right green, bottom blue, left yellow */
}

Try It Yourself

HEX Values

The border color can also be specified using hexadecimal values (HEX):

Example

p.one {
  border-style: solid;
  border-color: #ff0000; /* Red */
}

Try It Yourself

RGB Values

Or use RGB values:

Example

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

Try It Yourself

HSL Values

You can also use HSL values:

Example

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* Red */
}

Try It Yourself

You can try our CSS Colors Learn more about HEX, RGB, and HSL values in this chapter.