html – How to remove the visibility of the border from the outer border-radius?

Question:

I noticed such an unpleasant feature of border-radius , when an unpleasant rim is visible when the background of a nested element (in this case li ) is superimposed on the outer one ( ul ). fiddle

ul {
  background-color: #000;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0;
  border-radius: 4px 0 0 4px;
}
li {
  display: inline-block;
  list-style: none;
}
li.active {
  background-color: yellow;
  border-radius: 4px 0 0 4px;
}
a {
  text-decoration: none;
}
<ul>
  <li class="active"><a href="#">текст 1</a>
  </li>
  <li><a href="#">текст 2</a>
  </li>
  <li><a href="#">текст 2</a>
  </li>
</ul>

Answer:

Another option is pseudo-elements. But, if your eye is so diamond that a 1px width difference is too much, then this is not for you. The bottom line is that li.active does not have border-radius , we assign an additional class to the first and last menu element, which provides them with the corresponding pseudo-elements with absolute positioning. Move them (pseudo-elements) by 1px , hiding everything that needs to be hidden. Profit, you are great. http://codepen.io/malginovdesign/pen/KzXWQN?editors=1100

/* оформление */

* {
  box-sizing: border-box;
}
div {
  background: darkgrey;
  padding: 0 20px;
  width: 800px;
  margin: 0 auto;
  border-radius:4px;
}
a {
  text-decoration:none;
  color: #f9f9f9;
}

/* объект */

ul {
  display:inline-block;
  height:50px;
  line-height:50px;
  padding: 0;
  border-radius:4px;
  width: 100%;
  background: #333;
}
li {
  display:inline-block;
  list-style:none;
  width: calc(100% / 5);
  text-align:center;
  position: relative;
}
.active.first-link:before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    height: 100%;
    width: 5px;
    background: darkorange;
    border-radius: 4px 0 0 4px;
}
.active.last-link:after {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    height: 100%;
    width: 5px;
    background: darkorange;
    border-radius: 0 4px 4px 0;
}
.active {  
  background-color: darkorange;
}
<div>
<ul>
  <li class="active first-link"><a href="#">текст 1</a>
  <li class="no-active"><a href="#">текст 2</a>
  <li class="active"><a href="#">текст 2</a>
  <li class="no-active"><a href="#">текст 2</a>
  <li class="active last-link"><a href="#">текст 2</a>
</ul>
</div>
Scroll to Top