CSS Bevel Line

Published 10th May 2011

I was thinking this morning about a simple UI technique that is commonly used in web design yet doesn’t have a “non-image” resolution yet. I’m talking of course about bevel lines (if that’s what they are called). If you don’t know what I mean see the picture.

So a pure CSS solution to this is actually pretty simple.

.separator { border-top: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin:1.5em 0; }

All you need to do is tweak the opacity to your needs. You might also want to change the border colour to better match the background. But pretty simple right? Check out the demo to see it in action.

Update

As suggested in the comments the code now uses rgba so that less capable browsers (including IE) will simply not show anything as a fallback.