Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published May 13, 2021Updated Nov 29, 2023
Contribute to Docs

Sets the color of the border. The default value is the current element color.


border-color: <color>;

where <color> can be one of the following:

  • Color keyword: red, transparent, darkblue
  • Hexadecimal value: #FF0000
  • RGB value: rgb(255, 0, 0)
  • RGBA value: rgba(255, 0, 255, 0.3)
  • HSL value: hsl(0, 100%, 50%)
  • HSLA Value: hsla(180, 80%, 100%, 0.8)

Example 1

Set the border of the h1 element to be green, 3 pixels thick, and dotted:

h1 {
border-color: green;
border-width: 3px;
border-style: dotted;

h1 element with a green dotted 3px border

Example 2

Set the top and bottom borders coral and the left and right borders beige:

h1 {
border-color: coral beige;

h1 element with coral top and bottom borders, and beige left and right borders

All contributors

Looking to contribute?

Learn CSS on Codecademy