borderBottomRightRadius 속성은 요소의 오른쪽 아래 테두리에 둥근 모서리(rounded corner)를 추가하거나, 이미 설정된 값의 크기를 가져올 때 사용하는 HTML DOM 스타일 속성입니다. 이 속성을 활용하면 자바스크립트를 통해 동적으로 요소의 모서리 형태를 변경할 수 있습니다.
문법(Syntax)
borderBottomRightRadius 속성의 기본 문법은 다음과 같습니다.
object.style.borderBottomRightRadius = "length|% [length|%]|initial|inherit"
속성값 설명
| 번호 | 값 및 설명 |
|---|---|
| 1 | length px, em 등 단위를 사용하여 오른쪽 아래 모서리의 형태를 정의합니다. |
| 2 | % 백분율(%) 단위로 오른쪽 아래 모서리의 형태를 정의합니다. |
| 3 | initial 해당 속성을 기본(initial) 값으로 설정합니다. |
| 4 | inherit 부모 요소의 속성값을 상속받습니다. |
예제(Example)
다음은 borderBottomRightRadius 속성을 실제로 활용한 예제입니다. 버튼을 클릭하면 오른쪽 아래 테두리의 둥근 반지름이 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-bottom-right-radius: 240px 90px;
}
</style>
<script>
function changeBottomBorder(){
document.getElementById("DIV1").style.borderBottomRightRadius="90px 50px";
document.getElementById("Sample").innerHTML="오른쪽 아래 테두리 반지름이 감소되었습니다";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>아래 버튼을 클릭하여 위 요소의 오른쪽 아래 테두리 크기를 변경해 보세요</p>
<button onclick="changeBottomBorder()">테두리 변경하기</button>
<p id="Sample"></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
“테두리 변경하기(Change Bottom Border)” 버튼을 클릭하면 오른쪽 아래 모서리의 반지름이 줄어들어 다음과 같이 표시됩니다.
이처럼 borderBottomRightRadius 속성은 CSS의 border-bottom-right-radius와 동일한 역할을 하며, 두 개의 값을 지정할 경우 첫 번째 값은 가로 방향 반지름, 두 번째 값은 세로 방향 반지름을 의미합니다. 값을 하나만 입력하면 양방향에 동일하게 적용됩니다.