목차
- border-radius 예제 - 테두리 둥글게 하기
- border-radius 정의
- border-radius 구문 ★
- border-radius 예제 - 속성값 개수별 효과
- border-radius 예제 - 타원형 사각형
- border-radius 예제 - em 단위로 둥글게 하기
- border-radius 예제 - 네 꼭지 모두 50% 이상 시 모두 둥근원
- border-radius 예제 - 액자 효과
- 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>
결과보기
