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>