CSS border-radius 속성

정의와 사용법

border-radius 속성은 네 개의 border-*-radius 속성을 설정하는 간결한 속성입니다.

푸시:이 속성은 요소에 원角 경계선을 추가할 수 있도록 합니다!

추가로 참조하세요:

CSS3 강의:CSS3 테두리

실례

div 요소에 원角 경계선 추가:

div
{
border:2px solid;
border-radius:25px;
}

직접 시도해 보세요

페이지 하단에 더 많은 예제가 있습니다.

CSS 문법

border-radius: 1-4 length|% / 1-4 length|%;

주석:이 순서로 각 반지름의 네 가지 값을 설정합니다. bottom-left를 생략하면 top-right과 동일합니다. bottom-right를 생략하면 top-left과 동일합니다. top-right을 생략하면 top-left과 동일합니다.

속성 값

값 설명 테스트
length 원角의 형태를 정의합니다. 테스트
% 백분율로 원角의 형태를 정의합니다. 테스트

예제 1

border-radius:2em;

эквивалент:

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

예제 2

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;

기술 세부 사항

기본값: 0
상속성: no
버전: CSS3
JavaScript 문법: object.style.borderRadius="5px"

브라우저 지원

표中之수는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5