Question

I have a div into my css and I wanto to apply a border gradient only in the right is possible to do?
Other solution is to put an image on the right or apply at my border an image, Is supported by all browser or I have to put an image into my div in the right?
This is my css code:

#navigation li{
    list-style:none;
}

    #navigation li{
        margin: 0;
        width:126px;
        height:40px;
        padding-left:0px;
        padding-right:0px;
        list-style:none;
        float:left;

        border-color:gradient(start=#fff, end=#000, midpoint=50%);//works? and for other browser?

    }

My html:

<div id="navigation">
            <ul>
                <li><a href="index.php" id="index_btn">HOME</a></li>
                <li><a href="#" id="">AZIENDA</a></li>
                <li><a href="#" id="">PRODOTTI</a></li>
                <li><a href="#" id="">PARTNER</a></li>
                <li><a href="#" id="">NEWS</a></li>
                <li><a href="#" id="">CONTATTI</a></li>
            </ul>
        </div>

Answer 1

WebKit now (and Chrome 12 at least) supports gradients as border image:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink — http://www.webkit.org/blog/1424/css3-gradients/

NOTE: It is better to use gradient borders as an image for cross browser support

See this post for border-image understandings in details: http://css-tricks.com/understanding-border-image/