JavaScript에서 요소의 오른쪽 아래 모서리 테두리 모양을 설정하려면 borderBottomRightRadius 속성을 사용합니다. 이 속성을 활용하면 해당 모서리만 둥글게 처리한 테두리를 간단하게 만들 수 있습니다.
기본 문법
object.style.borderBottomRightRadius = "길이 | 백분율";
값에는 px, em 등의 길이 단위나 %(백분율)를 지정할 수 있으며, 값이 클수록 모서리가 더 둥글어집니다.
예제
아래 코드를 실행하고 버튼을 클릭하면, 상자의 오른쪽 아래 모서리가 둥근 형태로 바뀌는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed blue;
width: 120px;
height: 120px;
}
</style>
</head>
<body>
<button onclick="display()">오른쪽 아래 모서리 설정</button>
<div id="box">
<p>데모 텍스트</p>
<p>데모 텍스트</p>
</div>
<script>
function display() {
document.getElementById("box").style.borderBottomRightRadius = "30px";
}
</script>
</body>
</html>정리
borderBottomRightRadius 속성은 CSS의 border-bottom-right-radius와 동일한 역할을 하며, JavaScript로 동적으로 스타일을 변경할 때 유용합니다. 네 개의 모서리를 모두 둥글게 하고 싶다면 borderRadius 속성을 사용하면 됩니다.