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



About Kan San

Comments

  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

    .line-separator{
    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;
    }

    reference http://forum.bytesforall.com/showthread.php?t=1914

  5. Doesn’t work in Google Chrome too.

  6. IE 9 – this works!

    .line-separator{

    height:1.5px;

    background:#717171;

    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! :D

  11. PRABHURAJ says:

    Very simple and easy

Speak Your Mind

*