목차
- border-bottom-right-radius 예제 - 테두리 하단 오른쪽 둥글게
- border-bottom-right-radius 정의
- border-bottom-right-radius 구문
- border-bottom-right-radius 예제 - 애니메이션 효과 적용
border-bottom-right-radius 예제 - 테두리 하단 오른쪽 둥글게
<style>
div {
padding: 20px;
width:200px;
height:200px;
line-height:200px;
text-align:center;
border: 2px solid;
border-bottom-right-radius: 5em;
}
</style>
<div>홈짱닷컴 (Homzzang.com)</div>
결과보기
border-bottom-right-radius 정의
테두리 하단 오른쪽 모서리를 둥글게 함.
1. cf.
2.
3.
IE9 이상 주요 최신브라우저 지원.
4. MDN border-bottom-right-radius 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius
border-bottom-right-radius 구문
selector {border-bottom-right-radius: length [length] | initial | inherit;}
[속성값]
length
둥글게 처리할 길이 단위(예: px, % 등) 지정.
- 가로 세로 둥글기가 다른 경우 띄어쓰기(=공백)으로 구분.
- 값이 1개인 경우: 가로 세로 동일 지정. (예) border-bottom-right-radius: 5px : 가로세로 둘다 5px로 설정.
- 값이 2개인 경우: 가로 세로 개별 지정. (예) border-bottom-right-radius: 5px 10px;: 가로 5px , 세로 10px로 설정.
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값을 상속.
border-bottom-right-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-bottom-right-radius: 50px;}
}
/* Standard syntax */
@keyframes hzmove {
50% {border-bottom-right-radius: 50px;}
}
</style>
<div id="hz">홈짱닷컴 (Homzzang.com)</div>
결과보기
