HTML div에 style 속성으로 모서리 둥글게 만들어보자.

div에 border로 테두리 넣을 일이 잘 없었다. 테두리를 어쩌다가 넣었는데 너무 네모난게 마음에 들지 않는다. 이클립스 ctrl + space bar 기능으로 사용 가능한 것들 이리저리 찾아 봤는데 이 style 속성값은 나오지 않더라. 귀찮게 검색을 시키다니 말이야.

<div style="border: 2px solid #ccc;">

뭐 이정도로 div가 하나 있다고 하자. 테두리도 style 속성.

border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px; 
border-top-right-radius: 10px;

이 속성들만 넣어주면 된다.

<div style="border-bottom-left-radius: 10px; 
               border-bottom-right-radius: 10px; 
               border-top-left-radius: 10px; 
               border-top-right-radius: 10px; 
               border: 2px solid #ccc;">
</div>

10px에서 값이 커지면 둥근 정도도 커진다.