목차
- borderRadius 예제 - 테두리 둥글게 설정
- borderRadius 정의
- borderRadius 구문
borderRadius 예제 - 테두리 둥글게 설정
<style>
#hz {
border: 1px solid black;
width: 300px;
height: 150px;
}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">
<h1>홈짱닷컴 Homzzang.com</h1>
</div>
<script>
function homzzang() {
document.getElementById("hz").style.borderRadius = "25px";
}
</script>
결과보기
borderRadius 정의
요소의 테두리 둥글게 하기 설정/반환.
1.
이 속성 하나로 아래 4개 속성을 한번에 지정 가능. (시계방향)
borderTopLeftRadius : 상단좌측
borderTopRightRadius : 상단우측
borderBottomRightRadius : 하단우측
borderBottomLeftRadius : 하단좌측
2.
CSS border-radius 속성 참고.
borderRadius 구문
반환
object.style.borderRadius
설정
object.style.borderRadius = "1~4 length|initial|inherit"
[속성값 / 속성값 개수별 의미]
CSS border-radius 속성 참고.
[반환값]
요소의 테두리 둥글기 정도 (= border-radius 속성값)을 반환.