<ul class="tabrow">
<li><span>Lorem</span></li>
<li><span>Ipsum</span></li>
<li class="selected"><span>Sit amet</span></li>
<li><span>Consectetur adipisicing</span></li>
@borderColor: #e0e0e0;
.tabrow {
margin: 100px 0 20px;
.tabrow li {
color: #85b2d4;
.tabrow li span:before{
border-left: 1px solid @borderColor;
.tabrow li span:after{
border-right: 1px solid @borderColor;
.tabrow li.selected {
.tabrow:before {
border-bottom: 1px solid @borderColor;
.tabrow li:before,
.tabrow li:after {
.tabrow li:before {
box-shadow: 10px 0px 0 #f7f7f7;
box-shadow: -10px 2px 0 #f7f7f7;
.tabrow li.selected:before {
box-shadow: 10px 2px 0 #FFF;
.tabrow li.selected:after {
box-shadow: -10px 2px 0 #FFF;
.tabrow li.selected SPAN:before,
.tabrow li.selected SPAN:after{
$("LI").removeClass("selected");
$(this).toggleClass("selected", true);