Border Color

CSS Tutorial


Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

CSS Advanced


Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2302

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2308

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2312

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2316

Warning: Attempt to read property "post_status" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2320

Warning: Attempt to read property "ID" on null in /home/mydevhel/public_html/wp-admin/includes/template.php on line 2334

CSS Responsive

CSS Grid

Border Color

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

border-color

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