Deutsche Version

The HTML element hr (horizontal rule) is used on web pages to achieve a visual separation between two areas.
For this purpose, a simple design of the separator lines is sufficient (see examples here). However, you can use the hr element to create design effects that break up a web page or emphasize content.

In the following article I show different ways how to design the hr element attractively. To do this, I apply the CSS property background-image, with which an infinite number of designs are possible.

I will display each hr element at three different heights: 10px, 20px, and 50 px, to create different effects.

As a base for the hr element, I assign the CSS class .hr-basic to the hr element, assigning no border and having the border-radius be 5 pixels:

.hr-basic {
  border: none;
  border-radius: 5px;
}

1. Separator Line with Linear Gradient

Linear gradients allow a wealth of variations for designing dividing lines. Here I have chosen a striped line in the colors blue and gray.

Separator Line with linear-gradient - 10px height

Separator Line with linear-gradient - 20px height

Separator Line with linear-gradient - 50px height

The HTML code for the following examples with different height of hr elements:

<hr class="hr-basic linear-min">
<hr class="hr-basic linear">
<hr class="hr-basic linear-max">

The CSS code looks like this:

hr.linear {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: linear-gradient(135deg, #4D4D4D 25%, #0000FF 25%, #0000FF 50%, #4D4D4D 50%, #4D4D4D 75%, #0000FF 75%, #0000FF 100%);
  background-size: 2rem 2rem;
}

Following this scheme, I now create six more examples of hr element design.

2. Separator Line with repeating-linear-gradient

With ther CSS function repeating-linear-gradient() I generate horizontal lines with which a louvre effect is created.

Separator Line with repeating-linear-gradient - 10px height

Separator Line with repeating-linear-gradient - 20px height

Separator Line with repeating-linear-gradient - 50px height

Der CSS-Code:

hr.repeating-linear {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: repeating-linear-gradient(#ADD8E6, #ADD8E6 .125rem, #008000 .125rem , #008000 .25rem);
  background-size: 2rem 2rem;
}

3. Separator Line with repeating-radial-gradient

Radial gradients are created with the CSS function repeating-radial-gradient(); they work similar to linear gradients. In the following example I apply a simple CSS function:

Separator Line with repeating-radial-gradient - 10px height

Separator Line with repeating-radial-gradient - 20px height

Separator Line with repeating-radial-gradient - 50px height

hr.radial {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: repeating-radial-gradient(#BFBFBF, #A52A2A 20%);
  background-size: 20px 20px;
}

4. Separator Line with repeating-radial-gradient circle

If you add circle to the CSS function repeating-radial-gradient(), you get a target effect.

Separator Line with repeating-radial-gradient circle - 10px height

Separator Line with repeating-radial-gradient circle - 20px height

Separator Line with repeating-radial-gradient circle - 50px height

The CSS code looks as follows:

hr.radial-circle {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: repeating-radial-gradient(circle at 50%, #4D4D4D, #4D4D4D .5rem, #0000FF .5rem, #0000FF 1rem);
  background-size: 30px 20px;
}

It is more elegant and precise with background images. For this method I would like to show three more examples.

5. Separator Line with SVG Background Image (Inline-CSS)

Here I choose a wavy line as the SVG background image; the background color is a dark green. The color and width of the wavy lines is set via stroke='%23222' stroke-width='10' within the CSS property background-image.

The size of the SVG background image is 25 percent to show off the wavy lines nicely.

Separator Line with SVG background image wave (Inline-CSS) - 10px height

Separator Line with SVG background image wave (Inline-CSS) - 20px height

Separator Line with SVG background image wave (Inline-CSS) - 50px height

The according CSS code:

hr.svg-intern {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-color: #008000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 25%;
}

6. Separator Line with SVG Background Image

As another example for SVG background images I take this time an external SVG image. For this I use the Bull's eye known from darts - the center of a dartboard.

Separator Line with SVG background image Bull's Eye - 10px height

Separator Line with SVG background image Bull's Eye - 20px height

Separator Line with SVG background image Bull's Eye - 50px height

The code for this example is quite simple:

hr.svg-extern {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: url(img/bulls-eye.svg);
  background-size: contain;
  border: 1px solid #333;
}

7. Separator Line with JPG Background Image

As a last example for the design of the hr element via CSS I insert a JPG image into the CSS code. For this purpose, I use images of fictitious people that are supposed to stand for a team.

Separator Line with JPG background image Team - 10px height

Separator Line with JPG background image Team - 20px height

Separator Line with JPG background image Team - 50px height

The code for this example is as simple and clear as the previous one:

hr.team {
  height: 20px /* 10px für 'linear-min', 50px für 'linear-max' */;
  background-image: url(img/team.jpg);
  background-size: contain;
  border: 1px solid #333;
}

These examples may serve as inspiration for your own further experiments; have fun with your coding!

Rüdiger Alte