"Fade" borders in CSS

Issue

I'm using border-left: groove on an element but I want the border to "fade" into the background as it's about to end at the bottom.

I hope I'm making sense. How would I achieve something to that effect?

Solution

You can specify gradients for colours in certain circumstances in CSS3, and of course borders can be set to a colour, so you should be able to use a gradient as a border colour. This would include the option of specifying a transparent colour, which means you should be able to achieve the effect you're after.

However, I've never seen it used, and I don't know how well supported it is by current browsers. You'll certainly need to accept that at least some of your users won't be able to see it.

A quick google turned up these two pages which should help you on your way:

• CSS3 Gradient Borders
• http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders

Hope that helps.

Answered By - Spudley