Как убрать видимость ободка у внешнего border-radius?

#html #css #css3 #border

Заметил такую неприятную особенность у 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;
}

  
текст 1
  
  
текст 2
  
  
текст 2
  




    

Ответы

Ответ 1

Вариант другой - псевдоэлементы. Но, если у вас глаз настолько алмаз, что различия
ширины в 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;
}


  
текст 1
  
текст 2
  
текст 2
  
текст 2
  
текст 2




Ответ 2

Попробуйте заливать цветом не весь ul, а все li по отдельности. Ожидаемо появятся
пробелы нежду пунктами, для избежания просто не закрывайте li
http://codepen.io/peecaboo/pen/KzXWQN



div {
  background: darkgrey;
  padding: 10px;
}
ul {
  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: darkorange;
  border-radius:4px 0 0 4px;
  }
a {
  text-decoration:none;
  color: #f9f9f9;
}
li.no-active {
  background: #333;
}


  
текст 1
  
текст 2
  
текст 2