Lord have mercy on Lebanon. If you have anyone in Lebanon check on them. Pray for Lebanon
How to style an hr element using CSS

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

Related Post(s)

» Learn how to create responsive images with CSS

» How to create Text Animation using HTML and CSS

» Create A Cool Layout Using CSS

» Creating A Pure CSS Preloader - Source Code

» How to create a Fullscreen Background Video(Source Code)

collections_bookmark Category :: Css
date_range Published :: 10 months ago At: 05:46 PM
event_note Detailed Date :: Nov 27th, 2019
person Writer :: Code

YOU MAY LIKE THESE POSTS

share