스타일 borderRadius 속성
예시
div 요소에 둥근 테두리 추가:
document.getElementById("myDIV").style.borderRadius = "25px";
정의 및 사용
borderRadius 속성은 4개의 borderRadius 속성을 설정하거나 반환하기 위한 약식 속성입니다.
네 가지 경계 반경 속성은 다음과 같습니다(순서대로).
테두리TopLeftRadius
borderTopRightRadius
borderBottomRightRadius
borderBottomLeftRadius
팁: 이 속성을 사용하면 요소에 둥근 모서리를 추가할 수 있습니다!
브라우저 지원
Property | |||||
---|---|---|---|---|---|
borderRadius | Yes | 9.0 | Yes | Yes | Yes |
통사론
borderRadius 속성을 반환합니다.
object.style.borderRadius
borderRadius 속성을 설정합니다.
object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
참고: 각 반지름에 대한 4개의 값은 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 제공됩니다. 왼쪽 아래를 생략하면 오른쪽 위와 동일합니다. bottom-right가 생략되면 top-left와 동일합니다. top-right가 생략되면 top-left와 동일합니다.
속성 값
Value | Description |
---|---|
length | Defines the shape of the corners. Default value is 0 |
% | Defines the shape of the corners in % |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 0 |
---|---|
반환 값: | 요소의 border-radius 속성을 나타내는 String |
CSS 버전 | CSS3 |
관련 페이지
CSS 참조: border-radius 속성