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.



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





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


  1. Now thats very easy…. πŸ˜‰

  2. Nice one!! πŸ™‚

  3. Doesn’t work in IE.

  4. Carlos Cocom says:

    Doesn’t work in IE. Because background fill space.

    One better approach should be

    margin: 0 0 15px 0;
    border-bottom:1px solid #cccccc;
    padding: 0px 0 0px 0;
    padding: 20px 0 20px 0;
    padding: 20px 0 20px 0;


  5. Doesn’t work in Google Chrome too.

  6. IE 9 – this works!




    width: 304px;


  7. hmm the demo didn’t load for me at first. A few attempts and it started working again. thanks for the quick snippet

  8. How to do a vertical line seperator?

  9. Raja Mohammed says:

    That is Cool and Simple .. Thumps Up.

  10. Thank you so much to you and csccoder! πŸ˜€

  11. PRABHURAJ says:

    Very simple and easy

Speak Your Mind