I set rounded breadcrumbs for navigation. How can I remove the left and right backgrounds as seen in the following image.
.tabs {
overflow: hidden;
background: #eee;
}
.tabs a {
color: #363c46;
float: left;
width: 135px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
.tabs a.active {
background: #fefb09;
border-radius: 30px;
}
.tabs a:first-child {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.tabs a:last-child {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background: #d1d1d1;
/* to render the right end look */
}
<div class="tabs">
<a class="active">Item 1</a>
<a>Item 2</a>
<a>Item 3</a>
<a>Item 4</a>
<a>Item 5 </a>
</div>
check this fiddle
.tabs {
overflow: hidden;
background: #eee;
display: inline-block;
border-radius: 30px;
}