CSS3에는 border-radius 라는 속성이 추가되면서 상자 코너 부분을 부드럽게 처리할 수 있습니다. 하지만 아직 브라우저 간에 표준이 정해지지 않았기 때문에 속성 앞에 브라우저 벤더 이름을 붙여 표시하고 마지막에 (나중에 표준이 될) 속성을 함께 표시합니다.
div.rounded {
background-color: #ccc;
border:1px solid black;
width: 250px;
height: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
네 군데 모서리를 다르게 표시하겠다면 각 모서리의 속성값을 다르게 지정할 수 있습니다. border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius 형식으로 지정하면 됩니다. 하지만 이 속성 역시 아직 webkit 엔진 브라우저와 moz 엔진 브라우저에서 사용하는 속성 이름이 조금씩 다르기 때문에 주의해서 사용합니다.
div.rounded2 {
background-color: #FFFF99;
width: 250px;
height: 100px;
border: thin double #C90;
-webkit-border-bottom-left-radius:15px;
-moz-border-radius-bottomleft:15px;
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
}
border-radius와 관련된 속성들이 까다롭게 여겨진다면 자동으로 소스를 생성해주는 border radius generator를 이용할 수도 있습니다. http://border-radius.com/ 사이트에서 각 모서리에 원하는 값을 입력하면 결과를 눈으로 확인할 수 있고 필요한 소스를 자동으로 표시해 줍니다.
