[css] html 모서리 둥글게 하기 / div 모서리 둥글게 하기 / border-radius

 Cascading Style Sheets 통칭 css에서 div로 이루어진 사각형 또는 이미지의 모서리를 둥글게 하고 싶은 경우가 있다.

그럴땐 어떻게 하느냐?? 

생각보다 어렵지 않다.

사각형을 가지고 직접 예를 들어보자.

아래의 사각형은 div로 이루어진 것이다.

width:300px;
height:120px;
border:2px solid #000000;"

여기서 border의 radius 속성을 이용하면 사각형의 모서리가 둥글게 된다.

얼마나 둥글게 되냐면 아래의 그림과 같다.

border-radius:20px; 일 경우 반지름이 20px인 만큼 테두리가 둥글게 되는 것이다.

border-radius 를 적용하면 아래처럼 된다.

width:300px;
height:120px;
border:2px solid #000000;"
border-radius:20px;