css fading borders without border-image?

Question

hi there! does anyone know of a css-only method (css3 is fine, but preferably without border-image just in case) to style an active tab like the following dialog's toolbar (ignoring the icons): coda preferences on snow leopard

i'm using jquery-ui to generate tabs, which means the markup is similar to:

<div class="tabbed">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">...</div>
    ...
</div>

until i have a better method, i've been styling as follows (all the ui-tabs-* classes are auto-generated by the jQ-UI tabs plugin):

.ui-tabs-nav {
    background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a7a7a7)) repeat-x; padding:1px 4px;
}
.ui-tabs-nav li.ui-tabs-selected {
    border-width:0 1px; border-color:transparent rgba(0,0,0, 0.30) !important; padding:1px 0;
    background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0, 0)), color-stop(0.5, rgba(0,0,0, 0.1) ), to(rgba(0,0,0, 0))) repeat-x !important;
}
.ui-tabs-nav li.ui-tabs-selected > a {
    border-width:0 1px; border-color:transparent rgba(0,0,0, 0.15);
}

so how can i get gradient borders without using border-image? if i DO need border-image, can it use multiple css gradients as its content?

Answer 1

The easiest solution may be to just make some images that achieve the same effect, and then use them as background images.

Another solution is to place each menu item inside a span and have a gradient background on the span. The menu item will then need to be expanded to fill the span just enough to make it look like there's a border around the menu item. Cheap and a bit hacky but it works.

Answer 2

CSS3 gradient are usually processed as images.

For using gradients on simple element background, you should declare gradient as background-image instead of just background-color.

Try applying same rule over border-image. But remember that border image has poor support from most browsers as of now (even Opera and Chrome).

Answer 3

Why don't you just use a gradient background image with a mid opacity. Something like this should work (except replace the hex colors with rgba - with a mid alpha.

background-image:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#777777), to(#777777), color-stop(.10,#FFFFFF),color-stop(.90,#FFFFFF))