This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

2.3.2 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, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• transparent

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

Example 1: The border-color Property part 1 Border Colors

Demonstration of the 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;
}

Specific Side Colors

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

Example 2: The border-color Property part 2 Multiple Border Colors

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

HEX Values

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

Example 3: The border-color Property part 3 HEX Values

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

RGB Values

Or by using RGB values:

Example 4: The border-color Property part 4 RGB Values

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

HSL Values

You can also use HSL values:

Example 5: The border-color Property part 5 HSL values

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

You can learn more about HEX, RGB and HSL values in W3Schools.com's CSS Colors chapters.