title: css fading borders without border-image?
body: <p>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): <a href="http://i.stack.imgur.com/te8sx.png" rel="nofollow">coda preferences on snow leopard</a></p>
  
  <p>i'm using jquery-ui to generate tabs, which means the markup is similar to:</p>
  
  <pre><code>&lt;div class="tabbed"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="tab1"&gt;...&lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>.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 &gt; a {
      border-width:0 1px; border-color:transparent rgba(0,0,0, 0.15);
  }
  </code></pre>
  
  <p>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?</p>