Horizontal line hr HTML Tag with CSS

Today we are going to understand horizontal lines with html and css. The horizontal line or <hr> tag in html is basically used to define separators between two html sections. Like between two paragraphs, between heading and body contents or between two blocks of graphics etc.

The hr html tag or horizontal line is an empty tag that means we don’t need to close this tag. 

<!-- it is an empty tag and self closed -->
<hr />

We can also apply css to decorate our horizontal line. The other way to create horizontal lines is using any tag with bottom border or top border only or use div tag with specific height.  

I know this is not a difficult topic but if you are new to web programming and learning html & css yet, then this article might be useful for you.

Codepen solution for html horizontal line

Here is the codepen solution for this.

Go To Live Demo

HTML <hr> Tag without CSS example

The simplest way to use html hr tag is given below, direct and without css.

<div class="box">
  <h2>Horizontal line Without CSS</h2>
  <p> Html horizotal line between two paragraphs </p>
  <hr />
  <p> Html horizotal line between two paragraphs </p>
</div>

HTML <hr> Tag style with CSS examples

With css we can change our horizontal line completely and can make it beautiful according to our website theme. By default it doesn’t have height and it has all borders enabled. So, it looks a little weird as given in the above example.

Let’s start with the border and see how it will look if we remove all borders and remain only the bottom or top border.

Horizontal line With bottom border only

Yeah! It looks amazing with the bottom border. We can even change the border thickness to make it a little more visible but for the time it looks great. 

<h3>Horizontal line With bottom border only</h3>
<p> Html horizotal line between two paragraphs </p>
<hr class="b-none bb-1"/>
<p> Html horizotal line between two paragraphs </p>

Horizontal line With Border Color

If we change the border color it will be a great fit to our website theme. 

<h3>Horizontal line With Border Color</h3>
<p> Html horizotal line between two paragraphs </p>
<hr class="b-none bb-1 b-red"/>
<p> Html horizotal line between two paragraphs </p>

Horizontal line With Margin

Css margin allows us to horizontally center this html horizontal line because we have set the width to 50% and rest space will divide equally to both sides.

It again looks great as a separator between two paragraphs.

<h3>Horizontal line With Margin</h3>
<p> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum vLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum vLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum </p>

<hr class="b-none bb-1 b-blue w-50 m-auto"/>

<p> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum vLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum vLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum </p>

Horizontal line With CSS Animation

Let’s try some css animation too. So, the idea is when we hover the parent div our horizontal line with html <hr> tag should grow.

For this I have given a 30% width to it and when someone hover the paragraphs it will grow to the 50%.

<h3>Horizontal line With CSS Animation</h3>
<p> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum vLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum vLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum </p>
<hr class="b-none bb-2 b-pink w-30 hover:w-50 m-auto easy-all"/>
<p> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum vLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum vLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum </p>

CSS for all above examples

body {
  background-color : gray;
}
.box {
    padding: 10px 20px;
    margin : 10px 20px;
    background : white;
    border-radius : 10px;
}

.b-none {
  border: none;
}

.bb-1 {
  border-bottom : 1px solid;
}

.bb-2 {
  border-bottom : 2px solid;
}

.b-red{
  border-color : red;
}

.b-blue{
  border-color : blue;
}

.b-pink {
  border-color : pink;
}

.m-auto {
  margin : auto;
}

.w-50 {
  width : 50%;
}

.text-center {
  text-align : center;
}

.easy-all {
  transition : all 0.5s;
}

.w-30 {
  width : 30%;
}

.wrapper:hover .w-30.hover\:w-50 {
  width : 50%;
}

Hope you find it useful.