CSS Border Color

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, 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

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;
}

Result


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

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

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


RGB Values

Or by using RGB values:

Example

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


HSL Values

You can also use HSL values:

Example

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


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

3D Effect

Portal scene

UI Design