[cross-browser] CSS를 사용하여 둥근 모서리 만들기 [닫기]

브라우저가 지원하지 않으면 평평한 모서리가있는 내용을 볼 수 있습니다. 둥근 모서리가 귀하의 사이트에 그다지 중요하지 않은 경우 아래 행을 사용할 수 있습니다.

반경이 같은 모든 모서리를 사용하려면 쉬운 방법입니다.

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

그러나 모든 구석을 제어하려면이 방법이 좋습니다.

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

각 세트에서 볼 수 있듯이 브라우저 특정 스타일이 있고 네 번째 행에서 표준 방식으로 선언합니다. 앞으로 다른 사람들 (아마 IE도)이 스타일을 준비 할 수 있도록 기능을 구현하기로 결정했다고 가정합니다.

다른 답변에서 말했듯이 이것은 Firefox, Safari, Camino, Chrome에서 아름답게 작동합니다.

답변

div.box {
    background-color: yellow;
    border: 1px solid red;
    border-radius: 5px;
    behavior: url(corners.htc);
}

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 3px;