Заметил такую неприятную особенность у border-radius, когда при наложении фона вложенного элемента (в данном случае li) на внешний (ul) виден неприятный ободок. фидл
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;
}
Ответ
Вариант другой - псевдоэлементы. Но, если у вас глаз настолько алмаз, что различия ширины в 1px - это слишком, то он не для вас.
Суть - у li.active нет border-radius, к первому и последнему элементу меню присваиваем дополнительный класс, который обеспечивает их соответствующими псевдоэлементами с абсолютным позиционированием. Сдвиаем их(псевдоэлементы) на 1px, скрывая все, что нужно скрыть. Профит, вы великолепны.
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;
}
