border-radius 구현 방식
그림 1. CSS border-radius 구현 방식
CSS 데모: border-radius 데모 버튼을 클릭해 보세요!
selector {
    border-radius: /* value */
}
border-radius: 40px;
border-radius: 20px 70px;

/* 좌상단, 우하단: 20px
   우상단, 좌상단: 70px */
실제 적용된 모습
border-radius: 0 25px 50px 100px;

/* 좌상단: 0
   우상단: 25px
   우하단: 50px
   좌하단: 100px */
실제 적용된 모습
border-radius 타원형 구현 방식
border-radius 타원형
그림 2. CSS border-radius 타원형 구현 방식
/* 슬래시(/)의 앞과 뒤의 띄어쓰기는 선택사항이지만
   시각적으로 쉽게 구별하기 위해 띄어쓰는 것을 권장합니다. */
   
border-radius: 60px/30px; /* 권장하지 않음 */

border-radius: 60px / 30px; /* 권장함 */
border-radius: 60px / 30px;

/* 모든 모서리에
   수평(가로축) 반지름: 60px
   수직(세로축) 반지름: 30px
   타원형으로 둥글게 적용 */
실제 적용된 모습
border-radius: 10px 20px / 50px 100px;

/* 좌상단, 우하단: 10px(수평(가로축)) 50px(수직(세로축))
   우상단, 좌상단: 20px(수평(가로축)) 100px(수직(세로축)) */
실제 적용된 모습
border-top-left-radius: 10px;   /* 좌상단 모서리 */
border-top-right-radius: 20px;  /* 우상단 모서리 */
border-bottom-right-radius: 30px; /* 우하단 모서리 */
border-bottom-left-radius: 40px;  /* 좌하단 모서리 */
border-top-left-radius: 50px;

/* 좌상단 모서리 */
실제 적용된 모습
border-top-left-radius: 50px 100px;

/* 좌상단 모서리에
   수평(가로축) 반지름: 50px
   수직(세로축) 반지름: 100px
   타원형으로 둥글게 적용 */
실제 적용된 모습
<div class="circle"></div>
.circle {
    width: 100px;
    height: 100px;
    border: 5px solid #4ddbff;
    background-color: #ccf5ff;
    border-radius: 50%; /* 또는 border-radius: 50px; */
}
실제 적용된 모습
.circle {
    width: 100px;
    height: 100px;
    border: 5px solid #4ddbff;
    background-color: #ccf5ff;
    border-radius: 200px; /* 200px은 100px을 초과하지만,
                             브라우저는 이를 요소 크기에 맞게 조정해
                             50px로 적용합니다.*/
}
실제 적용된 모습
<img src="flower.jpg" alt="아름답게 핀 장미꽃">
img {
    border-radius: 30px;
}
실제 적용된 모습
<div class="circle"></div>
.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid #4ddbff; /* 모서리 부분이 둥글게 클리핑됩니다. */
    background-color: #ccf5ff; /* 모서리 부분이 둥글게 클리핑됩니다. */
    box-shadow: 5px 5px 5px black; /* 모서리 부분이 둥글게 클리핑됩니다. */
}

/* 요소에 클릭, 호버, 드래그 등 포인터 이벤트는
   곡선 테두리 가장자리에 클립됩니다. */
.circle:hover {
    background-color: gold;
}
실제 적용된 모습
<div class="circle">요소에 포함된 텍스트</div>
.circle {
    width: 150px;
    height: 150px;
    border: 5px solid #4ddbff;
    background-color: #ccf5ff;
    border-radius: 50%;
}
실제 적용된 모습
<div class="circle"></div>
.circle {
    width: 150px;
    height: 150px;
    border: 5px solid #4ddbff;
    background-color: #ccf5ff;
    border-radius: 50%;
    border-image: linear-gradient(red, blue) 30;
}
실제 적용된 모습
<table>
    <tr>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <td>td</td>
        <td>td</td>
    </tr>
</table>
table {
    width: 100%;
    border-collapse: separate;
    border: 5px solid blue;
    border-radius: 20px; /* 적용 됨 */
}
td {
    text-align: center;
    border: 5px solid red;
    border-radius: 20px; /* 적용 됨 */
}
실제 적용된 모습
<table>
    <tr>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <td>td</td>
        <td>td</td>
    </tr>
</table>
table {
    width: 100%;
    border-collapse: collapse;
    border: 5px solid blue;
    border-radius: 20px; /* 적용되지 않음 */
}
td {
    text-align: center;
    border: 5px solid red;
    border-radius: 20px; /* 적용되지 않음 */
}
실제 적용된 모습 border-collapse: collapse;인 경우 효과가 없습니다.

caniuse.com에서 더 자세한 정보를 확인해 보세요.