HTML hr Tag: Change design of horizontal line using CSS

Horizontal rule or hr tag is already designed by default. But bootstrap makes slight modifications. You can also modify it.

Horizontal rule or html hr element custom designs

Different ways to change the design of horizontal line (hr tag)

Method 1: By changing background color
Method 2: By defining border color
Method 3: Make a different shape
Method 4: By making transparent background
Method 5: By using border radius

Method 6: Using style attribute inside specific horizontal rule

Method 7: Defining Bootstrap classes 
inside specific horizontal rule
Method 8: Make gradient color & use custom style 

Method 1: 

You can simply change horizontal rule color by altering backgroung-colorCSS property. Please be sure you define aheightfor it.

hr { background-color: red; height: 2px; border: 0; }

Method 2:

Only defining border-top is enough to change color. Give a proper pixel and define a color. 

hr {border-top: 2px solid red;}

Method 3:

If you want to give the horizontal rule a different shape, then use the following method. 

hr {
border-top:5px solid blue;

Method 4:

Make horizontal rules background color transparent and define a height then define a color for top border. It will change your horizontal rule's design. It is a little bit advanced method. 

hr { display: block; height: 2px; background-color: transparent;
    border: 0; border-top: 2px solid red;
    margin: 1em 0; padding: 0; }

Method 5:

If you want to make an exceptional look, then you can make it using CSS border-radius property. 

hr { display: block; height: 2px;
    border: 0; background-color: yellow;
    margin: 1em 0; padding: 0; border:5px solid red; border-radius:10px}

Method 6: 

Make specific horizontal rule style by using CSS style attribute. That is how you can prevent hr elements from being the same design for all. 

<hr style="border-top: 1px solid #ccc; background: transparent;">

Method 7:

You can use CSS classes to style a particular hr element. You can also use Bootstrap classes. 

<hr class="bg-light" />

Method 8:

You can make custom style on your stylesheet. To make a gradient horizontal rule, follow the code below.

hr { 
    border-bottom:4px solid transparent; 
	border-image: linear-gradient(to right, red, yellow, blue);

Note: Gradient style doesn't allow radius. 

What do you think about this post? Please comment below. 

Similar posts you may also like:

Unordered list-style CSS: How to Change ul bullet-style?