Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How can i make a two toned hr tag?

How can i make a two toned hr tag?

Problem

I am making a divider line that runs across the Bottom of my header. It needs to be two pixels tall and two-toned. The top pixel needs to be grey horizontally all the way across, the bottom needs to be white. I am tempted to just put two one pixel divs with 100% width on top of each other, but am hoping that someone knows of a better way to do this with css and maybe with an hr tag?

Thank you very much!

Problem courtesy of: codelove

Solution

You should avoid the


tag because it's really inconsistent in different browsers. And honestly I haven't seen it being used for a while.

What you can do is to place a 100% wide and give it a top and a bottom color - http://jsfiddle.net/zSXya/

p.separator {
    height: 0;
    width: 100%;
    border: 0;
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
Solution courtesy of: Zoltan Toth

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How can i make a two toned hr tag?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×