JavaScript에서 요소의 오른쪽 상단 모서리 테두리 모양(둥근 정도)을 설정하려면 borderTopRightRadius 속성을 사용하면 됩니다. 이 속성에 원하는 픽셀(px) 또는 퍼센트(%) 값을 지정하면 해당 모서리만 부드럽게 둥글게 처리할 수 있습니다.
기본 문법
element.style.borderTopRightRadius = "값";
예제 코드
아래 예제는 버튼을 클릭하면 박스의 오른쪽 상단 모서리가 둥근 형태로 변경되는 코드입니다. 직접 실행해 보면서 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">데모 텍스트</div>
<br><br>
<button type="button" onclick="display()">오른쪽 상단 모서리 둥글게 변경</button>
<script>
function display() {
document.getElementById("box").style.borderTopRightRadius = "20px";
}
</script>
</body>
</html>코드 설명
- #box 스타일: 회색 실선 테두리를 가진 300×200 크기의 박스를 생성합니다.
- 버튼 클릭:
onclick이벤트로display()함수가 호출됩니다. - borderTopRightRadius 적용: JavaScript의
style.borderTopRightRadius속성에20px을 할당하여 오른쪽 상단 모서리만 둥글게 만듭니다.
참고 사항
다른 모서리도 같은 방식으로 개별 설정할 수 있습니다.
borderTopLeftRadius— 왼쪽 상단 모서리borderBottomLeftRadius— 왼쪽 하단 모서리borderBottomRightRadius— 오른쪽 하단 모서리borderRadius— 네 모서리를 한 번에 설정