[HTML] 테두리 둥글게 만들기 border-radius

테두리 둥글게 하는 방법입니다.

 

css 구조

border-radius:30px (전체 방향)

border-radius:30px 30px 30px 30px (사각형 으로 왼쪽부터 크기 설정 가능)

 

px단위가 커지면 커질수록 더 둥글게 나온다.

 

예시

css

.box1{width:200px; height:200px;text-align:center; line-height:200px;background:red; color:#fff;border-radius:10px;}
.box2{width:200px; height:200px;text-align:center; line-height:200px;background:blue;color:#fff;border-radius:30px;}
.box3{width:200px; height:200px;text-align:center; line-height:200px;background:green;color:#fff;border-radius:60px;}

html

<div class="box1">border-radius 10px</div>
<div class="box2">border-radius 30px</div>
<div class="box3">border-radius 60px</div>

각각의 크기차이 비교 캡쳐이고, 크기가 클수록 더 둥글게 보임을 확인할 수 있다.