CSS hr Style or color, Width, Line Styling of hr Tag

Ad Banner Image

CSS hr Style

hr Style means that, you can change the color, style and width of any Horizontal Line. Border Properties are used to Style the hr(Horizontal Line) element.

Example 1 – Styling CSS hr Tag color and Line Style

<!DOCTYPE html>
<html>
  <head>
	<style>
		.first 
		{
		 border-color: green;
		 border-style: solid;
		}
		.second
		{
		 border-color: red;
		 border-style: dashed;
		}
		.third
		{
		 border-color: blue;
		 border-style: dotted;
		}
		.four
		{
		 border-color: yellow;
		 border-style: inset;
		}
	</style>
  </head>
  <body>
	<h3>Default Horizontal Line</h3>
		<hr>
	<h3>Horizontal Line with Different Styles:</h3>
	<hr class="first">
	<hr class="second">
	<hr class="third">
	<hr class="four">
  </body>
</html>

The above code shows that how can you style horizontal line.

CSS hr Style or Styling hr Tag
Fig.1 – CSS hr Style Or Styling hr Tag

Warning: To remove all other borders, you have to use the property border: none;

Example 2 – Another example of hr Style with width CSS property.

<!DOCTYPE html>
<html>
  <head>
	<style>
		.first 
		{
		 border: none;
		 border-top-color: green;
		 border-top-style: solid;
		 border-top-width: 3px;
		}
		.second
		{
		 border: none;
		 border-top-color: red;
		 border-top-style: dotted;
		 border-top-width: 3px;
		}
		.third
		{
		 border: none;
		 border-top-color: blue;
		 border-top-style: dashed;
		 border-top-width: 3px
		}
		.four
		{
		 border: none;
		 border-top-color: hotpink;
		 border-top-style: double;
		 border-top-width: 3px
		}
	</style>
  </head>
  <body>
	<h3>Default Horizontal Line</h3>
		<hr>
	<h3>Horizontal Line with Different Styles:</h3>
	<hr class="first">
	<hr class="second">
	<hr class="third">
	<hr class="four">
  </body>
</html>

The above code shows that how can you style horizontal line in different ways.

CSS hr Color, Width and Line Type Setting
Fig.2 – Styling hr element Color.
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress