사파리에서 border-radius와 border를 같이 줬을때 이미지가 테두리를 덮는 현상

이미지를 원으로 보여주기 위해 border-radius:50% 을 주고 border:3px 을 줬다.

이쁘게 잘 보이는줄 알았건만 사파리에서 묘하게 보인다.

혼자만의 문제는 아니었던듯..

http://stackoverflow.com/questions/17202128/rounded-cornes-border-radius-safari-issue

다행히 답변이 도움이 됐다. 아 역시 구글링이 진리♥

내 경우 li안에 이미지가 단독으로 들어있었는데 이미지에 주던 리스트에 주던 마찬가지였으나 둘 다 줘 볼 생각은 못해봤다. +_+;

요는 라운딩을 주려는 요소와 그것을 싸고 있는 상위요소 모두 border-radius를 주고 상위요소에만 border를 주면 원하는 결과가 나온다.

내 경우 원으로 보여주기 위해 50%를 줬는데 css는 아래처럼..

#list li {

overflow:hidden;

-webkit-border-radius:50%;

-moz-border-radius:50%;

border-radius:50%;

border:3px solid #eee;

}

#list li img {

overflow:hidden;

-webkit-border-radius:50%;

-moz-border-radius:50%;

border-radius:50%;

}

물론 리스트간 간격은 있다. padding으로 처리했었으나 이를 위해 margin으로 변경.

사파리 7.0에서 수정될걸로 보인다고는 답변이 보인다.