• Q&A
  • 회원가입
  • 로그인

[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 속성값)을 반환.

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012