JavaScript에서 테두리 반경(border-radius) 한 번에 설정하기
JavaScript를 사용해 요소의 네 가지 테두리 반경 속성(왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래)을 모두 설정하려면 borderRadius 속성을 활용하면 됩니다. 각 모서리마다 개별적으로 스타일을 지정하지 않고도 이 속성 하나만으로 네 방향의 둥근 테두리를 동시에 적용할 수 있습니다.
예를 들어 값이 하나뿐이면 네 모서리 모두 같은 반경이 적용되고, 값이 여러 개면 순서대로 각 모서리에 다른 반경이 지정됩니다.
예제 코드
다음 코드를 실행해 보면 버튼 클릭 시 네 가지 border-radius 속성이 한 번에 어떻게 적용되는지 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 200px;
height: 200px
}
</style>
</head>
<body>
<div id="box">Demo Text</div>
<br><br>
<button type="button" onclick="display()">Add border radius</button>
<script>
function display() {
document.getElementById("box").style.borderRadius = "20px";
}
</script>
</body>
</html>코드 설명
- #box: 두께가 있는 회색 실선 테두리와 함께 크기가 200×200px인 사각형 박스를 정의합니다.
- <button>: 클릭하면 display() 함수가 호출되는 버튼입니다.
- display(): document.getElementById()로 박스 요소를 가져온 뒤 style.borderRadius = "20px"를 설정하여 네 모서리 전체에 20px의 둥근 반경을 한 번에 적용합니다.
만약 모서리별로 다른 값을 지정하고 싶다면 다음과 같이 공백으로 구분된 여러 값을 사용할 수 있습니다.
document.getElementById("box").style.borderRadius = "10px 30px 50px 70px";위 코드는 왼쪽 위부터 시계 방향으로 10px, 30px, 50px, 70px가 각각 적용됩니다. 이처럼 borderRadius 속성 하나만으로 CSS의 border-radius 축약형(shorthand)과 동일한 효과를 JavaScript에서 간편하게 구현할 수 있습니다.