border-radius

border-radius: 왼쪽위     오른쪽위     오른쪽아래     왼쪽아래;

 

css

div { width:300px; height:300px; float:left; margin:50px; background:lightblue; }

div:nth-child(1) { border-radius: 0px 10px 20px 40px; }

div:nth-child(2) { border-radius: 150px; }

 

● 넓이 값이 300px 이므로 각 모서리의 곡률을 150px 만큼 설정하면 정사각형에서 정원으로 변형 시킬 수 있다.