CSS로 상자의 테두리를 부드럽게 (Border-Radius)

8곳의 곡률을 모두 제각기 설정 가능하다.

<div style="width:200px; height:200px; background-color: green; margin: 20px auto; border-radius: 10px 10px 10px 10px / 100px 100px 4px 4px;"></div>

간단하게 이렇게 써도 된다.

<div style="width:200px; height:200px; background-color: green; margin: 20px auto; border-radius: 20px"></div>

테두리에 선이 있는 버전

<div style="width:200px; height:200px; background-color: yellow; border: 2px solid black; margin: 20px auto; border-radius: 20px"></div>