[DOM_Style] JS - borderRadius 속성 ★ - 테두리 둥글게 설정/반환 = 둥근 테두리 = 보더레이디어스 속성)

목차

1. borderRadius 예제 - 테두리 둥글게 설정
2. borderRadius 정의
3. 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 속성값)을 반환.