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

<style>

#homzzang {

   border-radius: 25px;

    background: #fe96cb;

    padding: 20px; 

    width: 200px;

    height: 150px;    

}

</style>  

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

결과보기

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

---

1. 

• 모든 요소에 대해 사용 가능.
• object-fit 속성 - 컨테이너에 맞게 '<img>/<video>' 크기 조정 방법 지정.
• object-position 속성 - 콘테이너 내 '<img>/<video>' 위치 조정.

 

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

• border-top-left-radius : 상단 좌측
• border-top-right-radius : 상단 우측
• border-bottom-right-radius : 하단 우측
• border-bottom-left-radius : 하단 좌측

 

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>

결과보기

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

결과 보기