목차
- borderBottomRightRadius 예제 - 하단우측 둥글게 설정
- borderBottomRightRadius 정의
- borderBottomRightRadius 구문
borderBottomRightRadius 예제 - 하단 우측 둥글게 설정
<style>
#hz {
border: 1px solid black;
width: 200px;
height: 100px;
}
</style>
<div id="hz">Homzzang.com</div>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.borderBottomRightRadius = "25px";
}
</script>
결과보기
borderBottomRightRadius 정의
테두리 하단 오른쪽 모서리를 둥글기 설정/반환.
1. cf.
2.
borderBottomRightRadius 구문
반환 (※ 인라인스타일 경우)
object.style.borderBottomRightRadius
설정
object.style.borderBottomRightRadius = "length [length] | initial | inherit";
[속성값]
length [length]
둥글게 처리할 길이 단위(예: px, % 등) 지정.
- 가로 세로 둥글기가 다른 경우 띄어쓰기(=공백)으로 구분.
- 값이 1개인 경우: 가로 세로 동일 지정. (예) border-bottom-right-radius: 5px : 가로세로 둘다 5px로 설정.
- 값이 2개인 경우: 가로 세로 개별 지정. (예) border-bottom-right-radius: 5px 10px;: 가로 5px , 세로 10px로 설정.
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값을 상속.