Change the design of horizontal line on your website using CSS

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

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

1: By changing the background color

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

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

Result:

2: By defining the border color

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

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

Result:

3: Make a different shape

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

hr {
border-top:5px solid blue;
border-radius:50%;
}

Result:

4: By making transparent background

Make horizontal rules background color transparent and define a height then define a color for the 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 blue;
    margin: 1em 0; padding: 0; }

Result:

5: By using the border radius

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}

Result:

6: Using style attribute inside specific horizontal rule

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

<hr style="border-top: 2px solid green; background: transparent;">

Result:

7: Defining Bootstrap classes inside specific horizontal rule

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

<hr class="bg-light" />

Result:

8: Make gradient color & use custom style

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);
	border-image-slice:1;
}

Result:

Note: Gradient style doesn't allow radius.