Search code examples
cssrounded-cornersbreadcrumbs

To remove the left and right background colors for rounded breadcrumbs


I set rounded breadcrumbs for navigation. How can I remove the left and right backgrounds as seen in the following image.

enter image description here

.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>


Solution

  • check this fiddle

    .tabs {
    overflow: hidden;
    background: #eee;
    display: inline-block;
    border-radius: 30px;
    }