Create a line separator using only CSS

Today LF (LearnFre) will tell you how to convert it into CSS without using a single image . so Let's get Started. :)

HTML CODE

<div class="line-separator"></div>

CSS

.line-separator{
height:1px;
background:#717171;
border-bottom:1px solid #313030;
}

Whats up with .line-separator CSS

Firstly we are creating a Line of height 1px and color #717171 . Here DIV ( .line-separator ) acts as a line so we are using background property to fill the color . After creating the line we need to create the line shadow of size 1px and color #313030 which we are doing it with the help of border-bottom property .

Height and background properties are for Line and border-bottom property is for Line shadow .

If you want to change the color of Line then replace #XXXXXX with your hex color codebackground:#XXXXXX; , border-bottom : 1px solid #XXXXXX; for Line Shadow .

Hope you liked it . Any feedback is appreciated . Have a Good Day :)