CSS gradients not clipping to rounded corners - non-scripted

I am having a bit of a problem with some CSS3 styling. I am trying to make three tabs next to each other that each have a linear background gradient applied to. On top of the gradient is a border-radius to the right so that have a rounded edge to them.

The whole tab bar has one gradient that goes across the entire bar in the background.

Now, the problem is that as you progress through my web pages the colour shading of the background gradients on each tab change to a lighter shade to highlight where you are in the journey. Obviously the first tab's gradient will stretch as far the edges of my rounded corner which is what I want but the second tab next to it which also has the lighter shaded gradient is being clipped off on the left as the previous tab is rendered as a square container and is picking up a snippet of the background gradient. Below is a URL for a screenshot of the problem.

https://rcpt.yousendit.com/1238426562/b75c5ab30c521e6f36514b228deca551?cid=tx-02002207350200000000&s=19104

What I want to do is somehow remove the left edges which inherit the background gradient and use the lighter shaded gradient instead that is set in the tab. Also, would prefer a non-script solution that is CSS based.

Any answers to this problem will be greatly appreciated!

Thanks -JaXL

Example of the code used is below:

CSS

ul.steps {
    background-color:#121A3C;
    background:linear-gradient(
              top, rgb(11,66,123), rgb(19,26,60), 
              color-stop(50%,rgb(22,40,85)), 
              color-stop(50%,rgb(18,26,60))
        );
    background:-webkit-linear-gradient(
              top, rgb(11,66,123), rgb(19,26,60), 
              color-stop(50%,rgb(22,40,85)), 
              color-stop(50%,rgb(18,26,60))
        );
    background:-webkit-gradient(linear, left top, left bottom, 
              from(rgb(11,66,123)), to(rgb(19,26,60)), 
              color-stop(50%,rgb(22,40,85)), 
              color-stop(50%,rgb(18,26,60))
        );
    background:-moz-linear-gradient(top, 
              rgb(11,66,123), rgb(19,26,60) 50%, 
              rgb(22,40,85) 50%, rgb(18,26,60)
        );
    background:-o-linear-gradient(top, 
              rgb(11,66,123), rgb(19,26,60) 50%, 
              rgb(22,40,85) 50%, rgb(18,26,60)
        );
    display:inline-block;
    width:100%;
    font-size:1em;
    color:#76859C;
}
ul.steps li {    
    padding:4px 20px 4px 8px;
    -webkit-border-top-right-radius:20px 20px;
    -webkit-border-bottom-right-radius:20px 20px;
    -moz-border-radius-topright:20px;
    -moz-border-radius-bottomright:20px;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    border-right:1px solid red;
    font-size:1.1em;
}
ul.steps li.highlight-lightershade {
    background-color:#3A8ABD;
    background:linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116), 
              color-stop(50%,rgb(32,63,129)), 
              color-stop(50%,rgb(25,54,116))
        );
    background:-webkit-linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116), 
              color-stop(50%,rgb(32,63,129)), 
              color-stop(50%,rgb(25,54,116))
        );
    background:-webkit-gradient(linear, left top, left bottom, 
              from(rgb(34,67,132)), to(rgb(25,54,116)), 
              color-stop(50%,rgb(32,63,129)), 
              color-stop(50%,rgb(25,54,116))
        );
    background:-moz-linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116) 50%, 
              rgb(32,63,129) 50%, rgb(25,54,116)
        );
    background:-o-linear-gradient(top, 
              rgb(34,67,132), rgb(25,54,116) 50%, 
              rgb(32,63,129) 50%, rgb(25,54,116)
        );
    color:#FFF;

Select allOpen in new window

HTML

<div class="content">
  <ul class="steps">
    <li class="highlight-lightershade">Link 1</li>
    <li class="highlight-lightershade">Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

Select allOpen in new window