CSS3 gives us gradient backgrounds, but can we make lines or borders with a gradient, like the one below?
Well, yes, since the line above is made using a <hr>-tag. Do you remember <hr>-tags? It’s basicly a block element with no content, with a default border. To create the line above I removed the default border, set the element height to 1px instead of 0px and added a css3 gradient background to it.
But as I mentioned, You might not remember the HR-tag. The reason for that is that it’s use is discouraged. You should rather group content in the markup, and let the group edges create the seperation, than to add a tag to create a line.
You can not use linear gradients as borders. But is there another way to add a seperation like this, without adding extra tags to the markup?
Yes. Since we’re doing CSS3 stuff anyway, we can use a feature from CSS2, the :after or :before selector…
Take this HTML…
<section class="seperated">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section> <section class="seperated">Donec sapien sapien, suscipit nec accumsan ac, ornare vel enim.</section> <section class="seperated">Nulla commodo eros nec lacus cursus mattis.</section> |
And apply this CSS:
section.seperated + section.seperated:before{ content:""; height:1px; background:-moz-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%); background:-webkit-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%); background:linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%); width:100%; display:block; } |
Okay, so that’s horizontal, how about vertical?
If you know the height of the line, you can use the same approach, but if you need it to stretch, I can’t see any way to do it, other than nesting boxes, having the gradient in the outer box, with 1px padding and setting a white background on the inner box.

