Create custom style Horizontal Rule HR tag using CSS

We can easily style any HTML tag using CSS. We can change the color of the hr tag, add padding to it, margin to it, and even change the style of the horizontal rule. Well, all this was old school, in modern webpage design, we want custom horizontal rules, for example, using a squiggly line SVG image or a wavy line SVG image as the hr tag.

In this article, I will share a couple of code examples with you to style the <hr> HTML tag for your next modern web project. I personally used these on Studytonight's new homepage.

Use Image with <hr> Tag

You can use an image to show when you use the <hr> tag. The CSS for this is super easy,

hr {
   height: 7px;
   background: url("hr-wavy-image.png") repeat-x 0 0;
   border: 0;
   width: 25%;
}

Images like this,

You can create this image using any paint software or download it from the internet.

You can use a .svg, or .png, or a .jpg image.

The CSS part repeat-x after the background property image URL, is to specify that you want to repeat the image to cover the entire available width.

Modern Web Design

In modern web designs, the <hr> tag doesn't have to cover the entire width, so you do not have to repeat the image you use.

I am talking about something like this,

The curvy squiggly line in the image above is a style hr tag. The image used is an SVG so that it can handle all the screen sizes.

Here is the CSS code for it,

hr{
    background-image:url("squiggly-line.svg");
    background-position:50%;
    background-repeat:no-repeat;
    background-size:contain;
    border:none!important;
    height:20px;
    width:75px
}

This CSS code will pick the image from the given URL and then add the style.

Even Better - Base64 encode the SVG

You can also convert the SVG file into base64 data file, then it will be nothing but some code that you can use in your CSS code.

You can use this tool to do so - https://base64.guru/converter/encode/image/svg

You can upload any SVG image here and get a data URI in the format data:image/svg+xml;base64...

Then the CSS code will look like,

hr {
    background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDEiIGhlaWdodD0iMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIgOC41IDYuMiA0bDcuOCA2IDYuNi01LjU1TDI3LjUgMTBsNC42NS01LjFMMzkuMiAxMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiLz48L3N2Zz4=");
    background-position:50%;
    background-repeat:no-repeat;
    background-size:contain;
    border:none!important;
    height:20px;
    width:75px
}

No need to provide any URL for the image.

The HTML code

For all the CSS examples that I have shared above, you don't have to do much in the <hr> tag. All you have to do is just use it.

<div>I like this Horizontal Rule</div>
<hr/>
<div>This looks cool</div>

That's it.

Conclusion

I would highly recommend using the data URI style along with SVG images for modern webpages because SVG images maintain the pixel quality for all screen sizes, the data requirement is less, and you can convert it into base64 data URI representation and add it directly to your CSS code, so no additional network call to get the icon from your server or CDN.