CSS border-radius 이해하기

border-radius는 경계선의 모서리를 얼마나 둥글게 할지를 지정한다. border-radius 속성을 이해하기 위해서는

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

이 4가지 속성을 먼저 이해하는 것이 편하다. border-radius는 이 4가지 속성의 축약 속성이기 때문이다. 위 4가지 속성은 순서대로 좌측상단, 우측상단, 우측하단, 좌측하단 모서리의 둥근 정도를 지정한다.

이 4가지 속성들은 하나, 또는 두개의 radius값을 설정함으로써 원형, 또는 타원형 모서리를 구현할 수 있다.

! 아래의 예에는 실제 CSS 스타일이 적용되었다.(RSS 피드에서는 아래의 스타일 설정이 나타나지 않을 수도 있음.)

예1 : radius 값을 하나만 설정한 원형(대칭) 모서리

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-top-left-radius: 50px;  

예2 : radius 값을 2개 설정한 타원형(비대칭) 모서리

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-top-left-radius: 100px 50px;  

radius 값을 설정할 때 첫번째 값은 가로(수평) 값이고, 두번째 값은 세로(수직) 값이다. 그리고 이 값은 px 외에 em이나 % 등으로도 설정이 가능하다.

그림1

예3 : radius 값을 %로 설정한 경우 

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-top-left-radius: 50% 100%;  

border-radius는 위의 4가지 속성들을 축약한 속성이다. 즉, border-radius 하나로 위 4가지 속성들을 모두 표현할 수 있다.

예를 들어,

 border-top-left-radius:2px;  
 border-top-right-radius:2px;  
 border-bottom-right-radius:2px;  
 border-bottom-left-radius:2px;  

는 

 border-radius:2px;  

와 같으며, 

 border-radius: 2em 1em 4em / 0.5em 3em;  

는 

 border-top-left-radius: 2em 0.5em;  
 border-top-right-radius: 1em 3em;  
 border-bottom-right-radius: 4em 0.5em;  
 border-bottom-left-radius: 1em 3em;  

와 같다. 

border-radius는 다음과 같은 형식으로 radius 값을 지정한다. 

 border-radius: [모서리 4개의 수평 radius 값] / [모서리 4개의 수직 radius 값] ;  

= 

 border-radius: [좌측상단 모서리의 수평 radius 값] [우측상단 모서리의 수평 radius 값] [우측하단 모서리의 수평 radius 값] [좌측하단 모서리의 수평 radius 값] / [좌측상단 모서리의 수직 radius 값] [우측상단 모서리의 수직 radius 값] [우측하단 모서리의 수직 radius 값] [좌측하단 모서리의 수직 radius 값] ;  

좀 더 이해하기 쉽게 그림으로 표현하면 <그림2>와 같다.

그림2

좌우측 각 4개의 숫자값들은 생략이 가능한데,

숫자값이 하나만 주어지면, 이는 모서리 4곳의 radius 값이 모두 동일함을 의미한다.

예4 :

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 10px;  

예5 : 수평 radius 값은 20px로 통일하고, 수직 radius 값은 각각 10px, 20px, 30px, 40px 로 따로 설정하였다.

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 20px / 10px 20px 30px 40px;  

숫자값이 2개가 주어지면 첫번째 숫자값은 좌측상단과 우측하단 모서리의 radius 값을, 두번째 숫자값은 우측상단과 좌측하단 모서리의 radius 값을 의미한다. 

예6 : 

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 20px 40px;  

예7 : 좌측상단과 우측하단의 수평 radius 값은 20px로 주고 우측상단과 좌측하단의 수평 radius 값은 40px로 주었으며, 수직 radius 값은 각각 10px, 20px, 30px, 40px 로 달리 설정하였다. 

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 20px 40px / 10px 20px 30px 40px;  

숫자값이 3개가 주어질 경우, 생략된 마지막 좌측하단 값은 대각선 방향인 우측상단 값과 동일하다. 즉, 숫자값 3개는 순서대로 각각 [좌측상단 값] [우측상단과 좌측하단 값] [우측하단 값] 을 의미한다. 

예8 : 

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 20px 40px 50px;  

예9 : 좌측상단의 수평 radius는 20px, 우측상단과 좌측하단의 수평 radius는 40px, 우측하단의 수평 radius는 50px로 설정하였고, 좌측상단과 우측하단의 수직 radius는 20px, 우측상단과 좌측하단의 수직 radius는 40px로 설정하였다. 헉헉. 

 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 border-radius: 20px 40px 50px / 20px 40px;  

+ 아래는 border-radius를 활용하여 만든 도형의 몇가지 예이다. 

 height: 65px;  
 width:160px;  
 border:1px solid black;   
 border-bottom-right-radius: 50px;  

 height: 5em;  
 width: 12em;  
 border:1px solid black;   
 border-radius: 1em 4em 1em 4em;  

 height: 70px;  
 width: 70px;  
 border:1px solid black;   
 border-radius: 35px;  

마지막으로, transition을 이용한 호버 효과 

 .예 {   
 width: 100px;  
 height: 100px;  
 border:1px solid black;  
 -moz-transition: all .3s ease-in-out;  
 -ms-transition: all .3s ease-in-out;  
 -webkit-transition: all .3s ease-in-out;  
 transition: all .3s ease-in-out;  
 }  
 .예:hover {  
 border-radius: 50px;  
 background: #2580a2;  
 }  

http://e-ki.tistory.com/73