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

[border] CSS - border-bottom-right-radius - (테두리 하단 오른쪽 모서리 둥글게) : IE 9

 

 

예제


<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>


결과보기

 

 

 

 

의미 & 사용법 


테두리 하단 오른쪽 모서리를 둥글게 함.

 


속성 기본값 : 0
상속 여부  : 상속 X
애니메이션 효과 : 가능함.
도입 버전 : CSS3
JS 구문 : object.style.borderBottomRightRadius="30px"
지원 브라우저: IE9 이상  ※ 최신 브라우저는 브라우저 접두어 (= 밴드 프리픽스) 안 붙여도 됨.

 

 

 

 

애니메이션 효과 예제


<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>


결과보기

 

 

 

 

CSS 구문


선택자 {border-bottom-right-radius: 속성값;}   ※ 가로값 , 세로값  동일하게 설정
선택자 {border-bottom-right-radius: 속성값 속성값;}  ※ 앞: 가로 값  ,  뒤: 세로 값


[예제]

※ 속성값이 1개일 경우
border-bottom-right-radius: 10px  :   가로값과 세로값을 둘다 10px로 설정

※ 속성값이 2개일 경우
border-bottom-right-radius: 20px 10px;:  가로값을 20px , 세로값을 10px로 설정

 

 

 

속성값


px 단위   (예) border-bottom-right-radius: 10px
% 단위  (예) border-bottom-right-radius: 10%
initial  - 기본값 (예) border-bottom-right-radius: initial
inherit - 부모 요소의 속성값 상속 (예) border-bottom-right-radius: inherit

 

 

 

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.borderBottomRightRadius = "50%";

}

</script>


결과보기


오늘도 즐겁게 열심히 .....

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