How to add border-color to an HTML element using CSS?

By IncludeHelp Last updated : November 19, 2023

To add border-color to an HTML element, use the border-color property and assign the color by standard color names or with HEX, RGB, RGBA, HSL, and HSLA values. To display border color, you need to use the border-style property. Border style value can be dotted, dashed, solid, double, groove, ridge, inset, or outset.

Syntax

border-color: color;
border-style: style;

Example

Below is the example to add border-color to an HTML element -

<!DOCTYPE html> 
<html>
  <head>
    <title>Document Title!</title>
    <style> 
      body { 
      width: 960px;
      margin: auto;
      font-family: Verdana,sans-serif;
      }
	  
      .border1{
      border-color: #006969;
      border-style: solid;
      }
	  
      .border2{
      border-color: #000000;
      border-style: dotted;
      }
	  
      .border3{
      border-color: green;
      border-style: double;
      }	  
    </style>
	
  </head>
  <body>
    <h1>Example to add border-color to an HTML element</h1>
	
    <p class="border1">Border 1 style is this.</p>
    <p class="border2">Border 2 style is this.</p>
    <p class="border3">Border 3 style is this.</p>
	
  </body>
</html>

Output

The output of the above example is:

border-color to an HTML element using CSS

Learn more about CSS borders: CSS Borders Tutorial

How to add a specific color to an element using CSS?