CSS3 border-radius 속성 사용 방법 및 예제

border-radius 속성은 요소의 모서리를 둥글게 만듭니다. 그것은border-top-left-radius，border-top-right-radius，border-bottom-right-radius와border-bottom-left-radius속성의 약자.

다음 표는 이 속성의 사용 설명과 버전 기록, 그리고 이 속성이 JavaScript 스크립트에서 사용하는 문법을 설명합니다.

border-반지름 사용 문법

이 속성의 문법은 다음과 같습니다：

border-반지름:[길이 | 비율]　1　to　4　values　
　\}}-------------------------------/
　　　　　　　　　　　　첫 번째 반지름
/　[길이 | 비율]　1　to　4　values | initial | inherit
　　　\}}------------------------------/
　　　　　　　　Second radii (optional)

이 표기법은 하나, 두 개, 세 개 또는 네 개의 공백으로 구분된 값을 사용할 수 있습니다。

• 지정된 경우한 가지 값이 경우, 모든 모서리의 반지름을 정의합니다。

• 지정된 경우두 가지 값이 경우, 첫 번째 값은 왼쪽 상단과 왼쪽 하단에 사용되고, 두 번째 값은 오른쪽 상단과 왼쪽 하단에 사용됩니다。

• 지정된 경우세 가지 값이 경우, 첫 번째 값은 왼쪽 상단과 왼쪽 하단에 사용되고, 두 번째 값은 오른쪽 상단과 왼쪽 하단에 사용됩니다。

• 지정된 경우네 가지 값이 경우, 각 값은 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단의順서로 각각 적용됩니다。

아래 예제는 border를 사용하는 방법을 보여줍니다-radius 속성.

　　div {
　　　border:　2px solid #f08080;
　　　border-radius:　20px;
　　}

속성 값

아래 표는 이 속성의 값을 설명합니다。

브라우저 호환성

border-radius 속성을 지원하는 브라우저의 호환성을 보여주는 표에서의 숫자는 해당 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다；모든 주요 브라우저는 이 속성을 지원합니다。

추가로 읽어보기

教程 참조:CSS Border，CSS3 Border。

관련 속성:border-bottom-left-radius，border-bottom-right-radius，border-top-left-radius，border-top-right-radius