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

[border] CSS - border-radius 속성 ★ - 테두리둥글기 지정 (= border-radius속성 = 보더레이디어스속성) (IE9+) ※ 모든 (테두리/꼭지점/모서리)를 둥글게

목차
  1. border-radius 예제 - 테두리 둥글게 하기
  2. border-radius 정의
  3. border-radius 구문 ★
  4. border-radius 예제 - 속성값 개수별 효과
  5. border-radius 예제 - 타원형 사각형
  6. border-radius 예제 - em 단위로 둥글게 하기
  7. border-radius 예제 - 네 꼭지 모두 50% 이상 시 모두 둥근원
  8. border-radius 예제 - 액자 효과
  9. border-radius 예제 - <table> 태그 테두리 둥글게 하기

 

border-radius 예제 - 테두리 둥글게 하기 


<style>
#homzzang {
   border-radius: 25px;
    background: #fe96cb;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style>  

<p id="homzzang">홈짱닷컴 (homzzang.com)</p>

결과보기

border-radius 정의


요소의 테두리 꼭지를 둥글게 (= 부드럽게) 처리.



1. 
모든 요소에 대해 사용 가능.

2. 
border-radius 속성은 아래 4개 속성을 한번에 표현. (시계방향)

3. 

  • 기본값: 0
  • 상속여부: X
  • 애니효과: O
  • JS구문: object.style.borderRadius="30px"
 
4.
IE9 이상 주요 최신 브라우저 모두 지원.
  • 구형 브라우저 경우 접두어 필요. 
  • (크롬,사파리: -webkit- / 파이어폭스: -moz- / 오페라: -o-)
 
 

border-radius 구문 ★

 

selector {border-radius: 1~4 length|initial|inherit;}

 


[속성값]

 

1~4 length

코너 모양 지정. (단위: px, % 등 가능) (기본값: 0)

※ 숫자가 커질수록 둥글게 됨.

 

initial

이 속성의 기본값으로 사용

 

inherit

부모 요소의 속성값 상속

 


[속성값 개수별 의미]


border-radius: 10px; /* 1개 */
(모든 구석을 10px) 만큼 둥글게.

border-radius: 10px 30px; /* 2개 */

(상좌/하우 10px, 상우/하좌 30px) 만큼 둥글게.

border-radius: 10px 30px 50px; /* 3개 */
(상좌 10px, 상우/하좌 30px, 하우 50px) 만큼 둥글게.

border-radius: 10px 30px 50px 70px; /* 4개 */
(상좌 10px, 상우 30px, 하우 50px, 하좌 70px) 만큼 둥글게.
※ 시계 방향.

 

 

border-radius 예제 - 속성값 개수별 효과


<style>
#homzzang1 {
    border-radius: 10px;
    background: #fe96cb;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style>
<p id="homzzang1">홈짱닷컴 (homzzang.com)
<br><br>10px;</p>

<style>
#homzzang2 {
    border-radius: 10px 30px;
    background: #fe96cb;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style>
<p id="homzzang2">홈짱닷컴 (homzzang.com)
<br><br>10px 30px;</p>

<style>
#homzzang3 {
    border-radius: 10px 30px 50px;
    background: #fe96cb;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style>
<p id="homzzang3">홈짱닷컴 (homzzang.com)
<br><br>10px 30px 50px;</p>

<style>
#homzzang4 {
    border-radius: 10px 30px 50px 70px;
    background: #fe96cb;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
</style> 
<p id="homzzang4">홈짱닷컴 (homzzang.com)
<br><br>10px 30px 50px 70px;</p>

결과보기
 

border-radius 예제 - 타원형 사각형


<style>
#homzzang1 {
    border-radius: 50px/15px;
    background: #ff62a1;
    padding: 20px;
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align:center;
    margin-bottom:30px;
}

#homzzang2 {
    border-radius: 15px/50px;
    background: #ff62a1;
    padding: 20px;
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align:center;
    margin-bottom:30px;
}

#homzzang3 {
    border-radius: 50%/10%;
    background: #ff62a1;
    padding: 20px;
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align:center;
    margin-bottom:30px;
}

#homzzang4 {
    border-radius: 10%/50%;
    background: #ff62a1;
    padding: 20px;
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align:center;
    margin-bottom:30px;
}
</style>

<div id="homzzang1">가로/세로: 50px/10px</div>
<div id="homzzang2">가로/세로: 10px/50px</div>
<div id="homzzang3">가로/세로: 50%/10%</div>
<div id="homzzang4">가로/세로: 10%/50%</div>

결과 보기
 

border-radius 예제 - em 단위로 둥글게 하기

 

<style>

.rounded {

  width:160px;

  background-color: #bdf;

  border:2px solid #1bf;

  padding:0.5em;

  border-radius:0.5em;

  -moz-border-radius: 0.5em;

  -webkit-border-radius: 0.5em;

  overflow:hidden;

}

img {

  width:160px

  height:auto;

  border-radius:0.5em;

  -moz-border-radius: 0.5em; 

  -webkit-border-radius: 0.5em;

}

</style>

<div class='rounded'><img src='https://source.unsplash.com/random'</div>

 

결과보기

※ 이미지 너비가 부모 요소 영역보다 큰 경우 overflow:hidden 속성 필요 
※ 위처럼 이미지의 높이를 auto로 잡고 너비는 부모 영역 내로 설정 권장.
 

border-radius 예제 - 네 꼭지 모두 50% 이상 시 모두 둥근원

 

<style>

div {  

  margin:20px;

  width:200px;

  height:200px;

  line-height:200px;

  text-align:center;

  border:1px solid red;

}


.a { border-radius:50%;}

.b { border-radius:75%;}

.c { border-radius:100%;}

.d { border-radius:25% 50% 75% 100%;}

.e { border-radius:100% 50% 100% 50%;}

.f { border-radius:100% 50% 50% 100%;}

</style>
 

<div class="a">a : 50%</div>

<div class="b">b: 75%</div>

<div class="c">c: 100%</div>

<div class="d">d: 25% 50% 75% 100%</div>

<div class="e">e: 100% 50% 100% 50%</div>

<div class="f">f : 100% 50% 50% 100%</div>

 

결과보기

 

border-radius 예제 - 액자 효과

 

<style>

#hz {

    position:relative; 

    width:100%; 

    min-width:320px;

    height:100px;   

    line-height:100px;

    text-align:center;

    border:2px solid red; 

    border-radius:20px;

    overflow:hidden;

}

.corner {

    position:absolute; 

    width:40px; 

    height:40px;

    border-radius:50%

    background:red;

}

.c1 { left:-20px; top:-20px; }

.c2 { right:-20px; top:-20px; }

.c3 { left:-20px; bottom:-20px; }

.c4 { right:-20px; bottom:-20px; }

</style>


<div id="hz">

  홈짱닷컴 Homzzang.com

  <div class="corner c1"></div>

  <div class="corner c2"></div>

  <div class="corner c3"></div>

  <div class="corner c4"></div>

</div>

 

결과보기

 

border-radius 예제 - <table> 태그 테두리 둥글게 하기

 

<style>

table {

  border-collapse: collapse;

  border-radius: 1em;

  overflow: hidden;

}


th, td {

  padding: 1em;

  background: #ddd;

  border-bottom: 2px solid white; 

}

</style>

 

<table>

  <tr>

    <th>1</th>

    <th>2</th>

    <th>3</th>

  </tr>

  <tr>

    <td>1</td>

    <td>2</td>

    <td>3</td>

  </tr>

</table>

 

결과보기


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

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