Fading a border (css)

Here is a picture of what I am working with:

I need the borders bel开发者_如何学Goow the vertical menu bar (on the left) to fade out (the one going up and the one going down). How would I make these two borders fade out? It seems kind of blocky now. I prefer not to use JavaScript but I will probably do what is necessary (I'm trying to make the site as light weight as possible).

EDIT

By fade, I do mean over space, not time.

You can use two fade-out images as background-image

li.edge_top, li.edge_bottom {
  background-position: right;
  background-repeat: no-repeat;
}

li.edge_top {
  background-image: url:('fadeout_top.png');
}

li.edge_bottom {
  background-image: url:('fadeout_bottom.png');
}

You can make a bunch of 1px tall blocks with successively lighter border-right colors.

(Assume you mean "fade" as in over space, not time)

You could try the new CSS3 border-right-image attribute (http://www.css3.info/preview/border-image/) with a tall gradient PNG. However, this isn't going to be widely supported in most browsers. You're probably better off creating an image with the right gradient and setting it as the background-image on the .edge_bottom and .edge_top css classes (be sure to remove the existing border from those classes, too)

CSS3 gradients to the rescue!

Live Demo

Note: Gradients are only set up for Firefox. I can't test Webkit, but it should be pretty much the same.

This will remove it, these pseudo elements are not supported in older browsers

ul.vertical_menu > li:first-child {
    border-right:none;
}
ul.vertical_menu > li:last-child {
    border-right:none;
}

http://jsfiddle.net/5Ceb5/