CSS border-color

jiwon.shin's avatar
Published May 13, 2021Updated Nov 29, 2023
Contribute to Docs

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

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours

Syntax

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

Contribute to Docs

Learn CSS on Codecademy

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours