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.

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다