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

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.
You can leave a response, or trackback from your own site.

2 Responses to “CSS hr Style or color, Width, Line Styling of hr Tag”

  1. Maud Diebol says:

    Hi there! Someone in my Facebook group shared this site with us so I came to give it a look. I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers! Exceptional blog and terrific design.

  2. I like this website its a master peace ! .

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