[CSS3] border-radius 속성알아보기

CSS3에서는 border-radius 속성이 추가 되었다. 이 속성은 테두리의 모서리를 둥글게 만들어 준다.

border-radius를 이용하면 복잡한 코드나 이미지를 사용하지 않고도 쉽게 라운딩처리를 원하는 형태로 할 수 있다.

사용하기전 지원 브라우저를 확인해보자.

* border-radius 브라우저 버전별 확인

지원지원  = 지원     지원안됨  = 지원되지 않음     부분지원  = 부분지원

	IE	Firefox	Chrome	Safari	Opera	ios Safari	Opera Mini	Android Browser	Blackberry Browser
								2.1 -webkit-
		3.6 -moz-				3.2 -webkit-		2.2
	7.0	12.0	19.0			4.0-4.1		2.3
	8.0	13.0	20.0	5.1		4.2-4.3		3.0
Current	9.0	14.0	21.0	6.0	12.0	5.0-5.1	5.0-7.0	4.0	7.0
Near future	10.0	15.0	22.0		12.5	6.0			10.0
farher future		16.0	23.0

위 표와 같이 모든 버전에서 사용하게 할려면 접두어를 같이 입력해야한다

#box1{ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }	- 하나의 속성값을 입력하면  사각형 각 모서리가 같은형태로 둥글게 표현된다 - #box1은 border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px;border-bottom-left-radius:10px; 의 단축형이다
#box2{ border-radius:10px 20px 30px 60px }	- 왼쪽위, 오른쪽위, 오른쪽아래, 왼쪽아래 (시계방향)
#box3{ border-radius:20px 40px }	- (왼쪽위, 오른쪽아래) (오른쪽위, 왼쪽아래)
#box4{ border-radius:100px/60px }	- (수평부분 곡선) (수직부분곡선)