Create a line separator using only CSS

Few days back i wrote an article on how to create an awesome line separator in webdesigns using photoshop . Today i will tell you how to convert it into CSS without using a single image .

I have explained an important thing about choosing colors for line separators on my previous article so one need to have a look at the article before following this tutorial.

Demo

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 code background:#XXXXXX; , border-bottom : 1px solid #XXXXXX; for Line Shadow .

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

Share on Facebook



Comments (11)

  1. Saket Jajodia January 24, 2011
  2. Sai January 24, 2011
  3. nopers March 23, 2011
  4. Carlos Cocom November 4, 2011
  5. Baloot December 19, 2011
  6. csccoder January 12, 2012
  7. Tyler August 1, 2012
  8. Eugene August 23, 2012
  9. Raja Mohammed August 24, 2012
  10. gilgamesh April 9, 2013
  11. PRABHURAJ April 12, 2013

Leave a Reply