[CSS] 모서리를 둥글게! border-radius

이런 둥근 유형의 버튼을 만들어보자!

일반적으로 box-model을 만들고, 테두리 값을 넣게 되면 딱딱하게 라인이 생기게 됩니다. 조금 더 부드럽고, 둥글게 할 수 있는 border-radius 입니다. 간단하면서도 정말 많이 사용되고 있는 CSS입니다.

border-radius는 CSS3 에서 정의되었고, IE9 부터 지원하게 됩니다.

border-radius의 값을 설정하는 방법은 아래와 같습니다.

border-radius: 10px 20px 10px 10px;

위의 값은 네 방향을 설정하게 됩니다. 제일 좌측에 있는 코드로부터 좌측 위 / 우측 위 / 우측 아래 / 좌측 아래 이렇게 설정이 됩니다.

좌측 위: 10px
우측 위: 20px
우측 아래: 10px
좌측 아래: 10px

이런식으로 설정이 가능하기 때문에 개별적으로 값을 줄 수 있습니다.

---

border-radius: 15px;

위의 값은 모든 방향의 15px을 둥글게 설정하라는 값입니다.

---

width:40px;
height:40px;
border-radius: 50%;
background:pink;

그리고 원형을 만들 때 많이 사용하는 방법입니다. border-radius 값을 50%로 주면 원형이 됩니다. 
위의 값으로 하면 pink 색상의 40px의 정원이 나오게 됩니다.