How to style an hr element using CSS

Make money for being or staying online/internet.

You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!

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

copy


<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.

copy


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