css gradient lines or borders

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

-tag. Do you remember
-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…

?View Code 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{
  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%);
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec sapien sapien, suscipit nec accumsan ac, ornare vel enim.
Nulla commodo eros nec lacus cursus mattis.


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.