목차
- border-top-left-radius 예제 - 테두리상단좌측둥글기 (em단위)
- border-top-left-radius 정의
- border-top-left-radius 구문
- border-top-left-radius 예제 - 테두리상단좌측둥글기 (%단위)
- border-top-left-radius 예제 - 애니효과
- border-top-left-radius 예제 - JS구문
border-top-left-radius 예제 - 테두리상단좌측둥글기 (em단위)
<style>
div {
padding: 20px;
width:200px;
height:200px;
line-height:200px;
text-align:center;
border: 2px solid;
border-top-left-radius: 5em;
}
</style>
<div>홈짱닷컴 (Homzzang.com)</div>
결과보기
border-top-left-radius 정의
테두리 상단 왼쪽 모서리 둥글기 지정.
1. cf.
2.
3.
IE9 이상 최신 브라우저 모두 지원.
※ 일부 구형 브라우저는 접두어 (= 밴드 프리픽스) 필요.
4.
MDN border-top-left-radius 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius
border-top-left-radius 구문
selector {border-top-left-radius: 1~2 length/%|initial|inherit;}
[속성값]
1~2 length/%
- 1개: 가로/세로 일괄 지정 (예) 10px - 가로/세로 둘 다 10px
- 2개: 가로/세로 각각 지정 (예) 20px 10px - 가로 20px, 세로 10px
initial
이 속성의 기본값으로 사용
inherit
부모 요소의 속성값 상속
border-top-left-radius 예제 - 테두리상단좌측둥글기 (%단위)
※ 배경이 테두리에 의해 짤림 주의 !!
<style>
#hz {
border: 2px solid red;
background: url(https://source.unsplash.com/random);
padding: 100px;
border-top-left-radius: 40%;
text-align:center;
color:white;
}
</style>
<div id="hz">홈짱닷컴 Homzzang.com</div>
결과보기
border-top-left-radius 예제 - 애니효과
<style>
#hz {
width: 300px;
height: 200px;
line-height:200px;
text-align:center;
border: 1px solid black;
-webkit-animation: hzmove 5s infinite; /* Chrome, Safari, Opera */
animation: hzmove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes hzmove {
50% {border-top-left-radius: 50px;}
}
/* Standard syntax */
@keyframes hzmove {
50% {border-top-left-radius: 50px;}
}
</style>
<div id="hz">홈짱닷컴 (Homzzang.com)</div>
결과보기
border-top-left-radius 예제 - JS구문
<style>
#hz {
border: 1px solid magenta;
width: 600px;
height: 300px;
line-height: 250px;
text-align:center;
}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">
<h1>홈짱닷컴 (Homzzang.com)</h1>
</div>
<script>
function homzzang() {
document.getElementById("hz").style.borderTopLeftRadius = "50%";
}
</script>
결과보기
