CSS border-color
Published May 13, 2021Updated Nov 29, 2023
Contribute to Docs
Sets the color of the border. The default value is the current element color.
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;}

Example 2
Set the top and bottom borders coral and the left and right borders beige:
h1 {border-color: coral beige;}

Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve 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