Border Color

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

The border-color property sets 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

HTML

				
					<h2>The border-color Property</h2>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>

CSS

				
					p.one {
  border-style: solid;
  border-color: red;
}
p.two {
  border-style: solid;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

Output

HEX Values

The color of the border can be defined by using a hexadecimal value (HEX):

CSS

				
					p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}
p.two {
  border-style: solid;
  border-color: #0000ff; /* blue */
}
p.three {
  border-style: solid;
  border-color: #bbbbbb; /* grey */
}

RGB Values

border with rgb value:

CSS

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

HSL Values

border with rgb value:

CSS

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

p.two {
  border-style: solid;
  border-color: hsl(240, 100%, 50%); /* blue */
}

p.three {
  border-style: solid;
  border-color: hsl(0, 0%, 73%); /* grey */
}

Output