How to Create Line Divider CSS

In this tutorial, I am going to show you how to create a line divider or separator using CSS.

In CSS, we have different techniques for creating line dividers or separators but the HTML gives us a more simple way. Let’s begin with that.

How to Create Line Divider with CSS

In HTML, we have <hr> element which is a built-in element that stands for horizontal rule. We can use it for creating various line dividers.

You can simply put <hr> element anywhere on a webpage where you want to show the line divider. And then you can use CSS to make it look as you wish. For example, in a paragraph as shown in the below HTML code.

→ index.html
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Optio iusto harum dolor rem vitae facilis tempore, aut 
    molestiae labore deleniti? <hr> Dolorem, adipisci facilis. 
    In rem molestiae quo magni, nemo facilis?

You will see that there is a horizontal line that separates the paragraph as shown in the output in the following image.

However, we can further customize the line divider with CSS. Let’s see how.

Custom Line Divider with CSS

We use the border-top property for the <hr> element to customize the line divider or separator in CSS.

The border-top is the shorthand property used for specifying the border-top-width that defines the thickness of the border, border-top-style for border style, and border-top-color for color.

Let’s see the CSS code example.

Example 1.1:

The following CSS code will make the divider 3px in width. It will change the border-top-style of the divider to dashed and also it will change the color to dodgerblue.

→ style.css
    border-top: 2px dashed dodgerblue;

You can see the output below.

dashed line divider css

Furthermore, the border-style property has the following built-in values that can be used for changing the look of the border:

→ style.css
border-style: solid | dashed | dotted | double | groove | inset | outset | ridge;

By default, <hr> the element has border-style set to solid.

Let’s look at the second example to create another line divider.

Example 1.2:

The following CSS code changes the border-top-style to double.

→ style.css
    border-top: 3px double dodgerblue;

The Output:

double line divider

Example 1.3:

This time, I made a CSS line divider of 25px in width and used a border-radius property to make the divider rounded using the following code.

→ style.css
    border-top: 13px solid darkviolet;
    border-radius: 25px;


css divider width

Example 1.4:

The following CSS code will make the dotted line divider.

→ style.css
    border-top: 4px dotted darkviolet;

Code Output:

css dotted divider

Check out this tutorial to learn more about CSS border property.

CSS Line Divider Spacing

Here the question arises, what if I want to increase the spacing above and bottom of the line divider?

The solution is simply using the CSS margin property as shown below in the code:

→ style.css
    border-top: 13px solid darkviolet;
    border-radius: 25px;
    margin: 40px 0;

In the above code, I applied a 40px margin at the top and bottom of the divider. The output is shown below.

divider spacing

This is how you can create simple CSS line dividers. Hope you liked it.

You can read more about <hr> horizontal rule element in the following tutorial:

Also don’t forget to help others by sharing this tutorial!