JavaScript DOM에서 요소의 왼쪽 아래(bottom-left) 모서리 테두리 모양을 둥글게 설정하려면 borderBottomLeftRadius 속성을 사용하면 됩니다. 이 속성에 픽셀(px) 또는 퍼센트(%) 값을 지정하면 해당 모서리가 부드러운 곡선 형태로 바뀌어 둥근 테두리 효과를 낼 수 있습니다.
예제
다음 예제는 버튼을 클릭하면 div 요소의 왼쪽 아래 모서리가 둥글게 변하는 코드입니다. 직접 실행해 보며 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed blue;
width: 120px;
height: 120px;
}
</style>
</head>
<body>
<button onclick="display()">Set bottom-left border corner</button>
<div id="box">
<p>Demo Text</p>
<p>Demo Text</p>
</div>
<script>
function display() {
document.getElementById("box").style.borderBottomLeftRadius = "30px";
}
</script>
</body>
</html>코드 설명
- #box 스타일: 파란색 점선 테두리(2px dashed blue)와 120×120px 크기의 박스를 정의합니다.
- display() 함수: 버튼을 클릭하면 호출되어
document.getElementById("box").style.borderBottomLeftRadius = "30px"를 통해 왼쪽 아래 모서리의 둥근 반지름을 30px로 설정합니다.
참고: 다른 모서리 설정하기
나머지 모서리도 유사한 속성으로 개별적으로 제어할 수 있습니다.
borderTopLeftRadius— 왼쪽 위 모서리borderTopRightRadius— 오른쪽 위 모서리borderBottomRightRadius— 오른쪽 아래 모서리
네 모서리를 한 번에 둥글게 처리하고 싶다면 CSS의 border-radius 속성을 JavaScript에서 style.borderRadius 형태로 지정하는 방법도 유용합니다.