First, you can use the :last-child
selector to set the border-right to none
for the last tab. Second you can use box-shadow
to add the second vertical line (the first is the border-right
):
HTML:
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
CSS:
ul {
list-style:none;
padding:0;
}
ul > li {
width:33%;
height:100px;
float:left;
border-right: 1px solid darkgray;
box-shadow: 1px 0 0 white, 2px 0 0 lightgray;
text-align:center;
}
ul > li:last-child {
border-right:none;
box-shadow:none;
}