[CSS] border-radius 속성 (모서리 둥글게)

 

 

 

border-radius 속성은 모서리 반경에 값을 주어, 해당 요소의 모서리를 둥글게 표현하도록 합니다.

이 속성은 IE9 이상의 브라우저에서 지원됩니다.

 

 

모든 모서리에 10px로 동일한 값이 적용됩니다.

 

border-radius: 10px;

 

 

 

 

4개의 모서리에 각각의 값을 적용할 수 있습니다.

 

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

 

 

 

 

각각 다른 값을 한 줄에 작성할 수도 있습니다.

첫 번째 40px은 상단 왼쪽 모서리, 두 번째 30px은 상단 오른쪽 모서리, 세 번째 20px은 하단 오른쪽 모서리, 네 번째 10px은 하단 왼쪽 모서리로

상단 왼쪽부터 시계 방향으로 값이 적용됩니다.

 

border-radius: 40px 30px 20px 10px;

 

 

 

 

2개의 값을 작성할 경우에는

첫 번째 10px은 왼쪽 상단과 오른쪽 하단 모서리에 적용되고, 두 번째 20px은 오른쪽 상단과 왼쪽 하단 모서리에 적용됩니다.

 

border-radius : 10px 20px;