모서리를 둥글게

경계선 끝을 둥글게 처리합니다.

div {
    border: 1px solid black;
    border-radius: 10px;
    height: 200px;
    width: 300px;
}

원 만들기

이 속성의 값은 원의 반지름입니다. 따라서 원을 만들려면 height, width 속성 값을 같게 설정하고 border-radius를 그 반으로 설정하면 됩니다.

div {
    border: 1px solid black;
    border-radius: 100px;
    height: 200px;
    width: 200px;
}

border-radius를 height와 width의 반보다 크게 설정해도 결과는 같습니다.

border-radius: 500px;

타원 만들기

원을 만드는 가장 편한 방법은 border-radius 값을 100%로 설정하는 것입니다.

border-radius: 100%;

이 상태에서 width와 height를 다르게 설정하면 타원이 됩니다.

div {
  border: 1px solid black;
  border-radius: 100%;
  height: 200px;
  width: 300px;
}

각 모서리를 다르게

각각을 다르게 설정할 수 있습니다.

div {
    border: 1px solid black;
    border-top-left-radius: 10px;     1
    border-top-right-radius: 20px;    2
    border-bottom-right-radius: 30px; 3
    border-bottom-left-radius: 40px;  4
    height: 200px;
    width: 200px;
}

각 모서리를 한 번에 다르게

border-radius 속성만으로도 각 각을 다르게 설정할 수 있습니다.

div {
    border: 1px solid black;
    border-radius: 10px1 20px2 30px3 40px4;
    height: 200px;
    width: 200px;
}

한 모서리의 양 끝을 다르게

border-top-left-radius 속성에 대해서 top과 left를 다르게 설정할 수 있습니다.

div {
    border: 1px solid black;
    border-top-left-radius: 100px 20px;
    border-top-right-radius: 100px 20px;
    border-bottom-right-radius: 100px 20px;
    border-bottom-left-radius: 100px 20px;
    height: 200px;
    width: 200px;
}

한 모서리의 양 끝을 한 번에 다르게

border-radius 속성만으로도 이를 설정할 수 있습니다.

div {
    border: 1px solid black;
    border-radius: 100px 100px 100px 100px / 20px 20px 20px 20px;;
    height: 200px;
    width: 200px;
}

margin과 padding 속성과 비숫하게 반복되는 부분을 축약할 수 있습니다.

border-radius: 100px / 20px;

다양한 반원 만들기

다양한 반원을 만들 수 있습니다.

div {
    border: 1px solid black;
    border-radius: 100px 100px 0 0;;
    height: 100px;
    width: 200px;
}

div {
    border: 1px solid black;
    border-radius: 0 100px 100px 0;;
    height: 200px;
    width: 100px;
}

참고 자료

• W3Schools CSS3 Tutorial