HTML DIV tag : 영역 테두리 모서리 둥글게 하기 : border-radius

DIV 태그로 영역을 만들고 테두리 선을 그리면, 기본적으로 사각형이 된다.
테두리의 모서리를 모두 또는 특정 모서리만 둥글게 하면 페이지에 더 잘 어울릴 때가 있다.
스타일(style)에 border-radius 를 주면 되고, 수치 단위는 px, %, em, pt 등을 쓰면 된다.


[모서리 둥글게 하기]

border-radius: 2em;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;

[네 모서리를 모두 둥글게 하기: border-radius: ]

<div align="center" style="width:60%; height: 100px; border: 1px solid orange; border-radius: 2em;">
여기는 DIV 역역이다
네 모서리를 모두 둥글게 하였다
</div>

[실제 적용한 모습]

여기는 DIV 역역이다
네 모서리를 모두 둥글게 하였다

[왼쪽 위 모서리만 둥글게 하기: border-top-left-radius: ]

<div align="center" style="width:60%; height: 100px; border: 1px solid orange; border-top-left-radius: 2em;">
여기는 DIV 역역이다
왼쪽 위 모서리만 둥글게 하였다
</div>

[실제 적용한 모습]

여기는 DIV 역역이다
왼쪽 위 모서리만 둥글게 하였다

[오른쪽 위 모서리만 둥글게 하기: border-top-right-radius: ]

<div align="center" style="width:60%; height: 100px; border: 1px solid orange; border-top-right-radius: 2em;">
여기는 DIV 역역이다
오른쪽 위 모서리만 둥글게 하였다
</div>

[실제 적용한 모습]

여기는 DIV 역역이다
오른쪽 위 모서리만 둥글게 하였다

[왼쪽 아래 모서리만 둥글게 하기: border-bottom-left-radius: ]

<div align="center" style="width:60%; height: 100px; border: 1px solid orange; border-bottom-left-radius: 2em;">
여기는 DIV 역역이다
왼쪽 아래 모서리만 둥글게 하였다
</div>

[실제 적용한 모습]

여기는 DIV 역역이다
왼쪽 아래 모서리만 둥글게 하였다

[오른쪽 아래 모서리만 둥글게 하기: border-bottom-right-radius: ]

<div align="center" style="width:60%; height: 100px; border: 1px solid orange; border-bottom-right-radius: 2em;">
여기는 DIV 역역이다
오른쪽 아래 모서리만 둥글게 하였다
</div>

[실제 적용한 모습]

여기는 DIV 역역이다
오른쪽 아래 모서리만 둥글게 하였다

[각 모서리에 다른 수치 주기: border-radius: 5px 10px 15px 20px ]
border-radius: 5px 10px 15px 20px; 과 같이 수자를 주어도 된다.
순서는 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순이다. 곧, 왼쪽 위 모서리 부터 시계 방향으로 차례로 적용된다.

[예1]

<div align="center" style="width:60%; height: 100px; border: 1px solid orange; border-radius: 0px 10px 20px 30px;">
여기는 DIV 역역이다
각각의 모서리에 다른 수치를 주었다.
</div>

[실제 적용한 모습]

여기는 DIV 역역이다
각각의 모서리에 다른 수치를 주었다.

[예2]

<div align="center" style="width:60%; height: 100px; border: 1px solid orange; border-radius: 0px 0px 30px 30px;">
여기는 DIV 역역이다
아래 두 모서리만 둥글게 하였다
</div>

[실제 적용한 모습]

여기는 DIV 역역이다
아래 두 모서리만 둥글게 하였다

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...