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.
<p> 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? </p>
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.
hr{
border-top: 2px dashed dodgerblue;
}
You can see the output below.
Furthermore, the border-style property has the following built-in values that can be used for changing the look of the border:
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.
hr{
border-top: 3px double dodgerblue;
}
The Output:
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.
hr{
border-top: 13px solid darkviolet;
border-radius: 25px;
}
Output:
Example 1.4:
The following CSS code will make the dotted line divider.
hr{
border-top: 4px dotted darkviolet;
}
Code Output:
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:
hr{
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.
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!
Topic: CSS
