이

개요

제목과 위 이미지가 모두.
border를 설정하지 않고 border-radius를 설정하면, IE11로 표시했을 경우는 인접 요소와의 사이에 선이 들어간다.
아마 IE11의 버그로, 렌더링시에 요소의 변까지 안티앨리어싱이 걸려 있는 것처럼 보인다.
그래서 얇은 선으로 보이는 것은 실제로는 요소 사이의 틈.

재현

HTML

<div class="bg-radius">foo</div>
<div class="bg-radius">bar</div>

CSS

.bg-radius {
    background-color: #ccc;
    border-radius: 4px;
}

대책

근본적인 대책은 없다(라고 생각한다).
그래서 원래 인접 요소와 붙은 요소에 border-radius를 설정하는 CSS를 쓰지 않는다.
아무래도 그렇게 할 필요가 있을 때는 역기로 해결하게 된다고 생각한다.

덧붙여서, 자신은 탭의 디자인을 하고 있어 이 버그를 만났다.
탭과 표시 영역 사이에 선이 들어가므로 z-index와 네거티브 마진으로 겹치는 것으로 회피했다.
하지만 역시 기분 나쁘기 때문에 디자인을 재검토했다.