border-radius

정의 및 사용

border-radius 는 사각형의 각 모서리를 둥글게 만드는 속성이다. 4개 모서리의 축약 속성으로써 border-radius 로 선언하면 4개의 모서리가 동일하게 적용된다.

정의 및 사용
기본값 0
상속 no
버전 CSS3
자바스크립트 구문 object.style.borderRadius=”5px”

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원 안함Chrome 지원Firefox 지원Opera 지원Safari 지원

IE 브라우저 외 모두 지원 (IE 계열은 9 부터 지원)

구문

{ border-radius:length | %; }
속성 값 설명
설명
length px, em 등 단위로 직접 숫자 지정
% % 값으로 둥근 정도를 지정

예제 1

div { border:2px solid red; border-radius:2em; }
=
div {
border:2px solid red;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}

예제 2

div { border:2px solid red; border-radius:2em 1em 4em / 0.5em 3em; }
=
div {
border:2px solid red;
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;
}

버그 및 이슈

소제목

code

목록 으로

댓글