Drei Werte für unterschiedliche abgerundete Ecken in CSS

Wenn drei Werte angegeben sind, dann legt der erste Wert die Abrundung für die obere linke Ecke fest, der zweite - gleichzeitig für die obere rechte und untere linke, und der dritte - für die untere rechte Ecke:

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

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

Результат: