Create your own Horizontal Rules <hr>

horizontal rules using html/css

For my portfolio I use horizontal rules <hr> to visually separate content. The normal horizontal rules are quite boring, so I created my own horizontal rules. Here is the short step-by-step tutorial.


Illustrator/Sketch…

First of all, you create a pattern in Illustrator or Sketch, which the <hr> should have. For my style I use the dimensions 20x4 px. If the style has to be endless, the pattern must overlap.
Afterwards it can be saved as SVG, PNG or JPG (PNG with background transparent).


CSS

Define the hr in your CSS file like this:

hr {
height: 6px;
background: url("hr.svg") repeat-x 0 0;
border: 0;
width: 25%;
}

Generally you can take everything as url, including online pictures, SVGs, PNGs etc (🤫 add to the same folder as the index.html file or enter the right path). The border is set to 0 and in this example I used the width of 25%. With Without this, the <hr> tag is as wide as the parent. The height of the <hr> tags can also be changed.


HTML

There is nothing special to note here ✌
️Just insert the <hr>tag.

<div>
Hi I'm Kevin 🧔🏻. I develop and design human centered experiences, processes and products for the services and solutions <hr> of tomorrow
</div>