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>

관련 링크

This entry was posted in 블로그, 워드프레스, HTML. Bookmark the permalink.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다