CSS3 box-shadow Property doesn't work correct

[Michel73]

If I use the following style-sheet without surrounding <scrollable-tabset> to my <uib-tabset> I get a shadow around the tabs.

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
      box-shadow: 0px 3px 10px #999;
    }

but with surrounding <scrollable-tabset> the shadow on the first tab occurs only on the right site.

For the case that the scroll-buttons doesn't appear this behavior isn't correct and for the case that they appear the shadow must be on left site of the first left button and on the right site of the last right button.

[Shemesh]

this is an expected behavior, not a bug.
the shadow of the li is being clipped by its parent ul. if you give the ul some padding you'll see the whole shadow. you'll need to use some css tweaks and tricks.

for example... add this:

.nav-tabs>li{
     padding: 0px 10px 0 10px;
}

[Michel73]

I tried your suggestion, but that is not what I wanted. See http://plnkr.co/edit/t4AajrfKULi61dkxfIb0?p=preview.
There should be no indenting between the tab and its tab-content.
Is there a better css trick to get this done?

[Shemesh]

i don't see any indenting between the tab and its tab-content, it looks good, please clarify.

[Michel73]

I want a continuous line at the edge from tab-content to its tab.

[Shemesh]

you can use margin-left: -10px on the ul.
and continue from there...

[Michel73]

Ok, thanks. Now, there is a light at the end of the tunnel.