In this post, you will learn how you can use the border property in CSS to style an hr element.

To make every thing easy we are just going to give each hr(horizontal line) element a class as shown in the code snippet below.

Watch the tutorial to follow STEP by STEP.

Hr (Horizontal Line) Mark Up

<p>Default</p>
<hr>

<p>Styled ones</p>
<hr class="one">
<hr class="two">
<hr class="three">
<hr class="four">

Hr styling code

Here we select each hr element using the class given to each. For example one, two, three, four, respectively.

hr.one{
	border-top:1px solid teal;
}

hr.two{
	border-top:1px dashed green;
}

hr.three{
	border-top:2px dotted red;
}

hr.four{
	border-top:5px solid teal;
	border-radius: 5px;
}
	

I will always put out free content on my YouTube Channel, but showing your support, subscribing to it, pushes me and gives me motivation, not because of the money, but because it feels like people really appreciate what I do. SUBSCRIBE TO:: Oston Code Cypher