HTML DOM의 borderRadius 속성은 요소의 네 모서리에 둥근 형태(라운드 코너)를 적용할 때 사용됩니다. 이 속성을 활용하면 borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius처럼 각 모서리별 테두리 반경 값을 개별적으로 설정하거나 조회할 수 있습니다.
문법(Syntax)
borderRadius 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
속성 값 설명
| 값 | 설명 |
|---|---|
| length | px, em 등 길이 단위로 테두리의 둥근 정도를 정의합니다. |
| % | 백분율(%) 단위로 테두리의 둥근 정도를 정의합니다. |
| initial | 해당 속성을 기본값(initial)으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
값은 최대 4개까지 지정할 수 있으며, 순서는 왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래 모서리입니다. 하나의 값만 지정하면 네 모서리 전체에 동일하게 적용됩니다.
예제(Example)
다음은 버튼을 클릭하면 div 요소의 테두리 반경을 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-radius: 1px 1px 1px 1px;
}
</style>
<script>
function changeBorderRadius(){
document.getElementById("DIV1").style.borderRadius="45px 45px 45px 45px";
document.getElementById("Sample").innerHTML="위 div의 네 모서리 테두리 반경이 커졌습니다";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>아래 버튼을 클릭하면 위 div의 테두리 반경 크기가 커집니다</p>
<button onclick="changeBorderRadius()">Change Border Radius</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
페이지를 처음 열면 다음과 같이 거의 각진 테두리가 표시됩니다.
“Change Border Radius” 버튼을 클릭하면 −
버튼 클릭 시 자바스크립트의 style.borderRadius 속성이 실행되어 네 모서리가 45px씩 둥글게 변경된 것을 확인할 수 있습니다. 이처럼 borderRadius 속성을 사용하면 CSS를 직접 수정하지 않고도 동적으로 요소의 모서리 스타일을 제어할 수 있습니다.