CSS에서 서로 다른 모서리에 대한 세 개의 border-radius 값

세 개의 값이 지정되면 첫 번째 값은 왼쪽 상단 모서리의 둥글기를 설정하고, 두 번째 값은 오른쪽 상단과 왼쪽 하단 모서리의 둥글기를 동시에 설정하며, 세 번째 값은 오른쪽 하단 모서리의 둥글기를 설정합니다:

html<div id="elem"></div>

css#elem {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  border-radius: 10px 20px 30px;
}

Результат: