Vier Werte für unterschiedliche Ecken in CSS

Wenn vier Werte angegeben sind, definiert der erste Wert die Abrundung für die obere linke Ecke, der zweite - für die obere rechte Ecke, der dritte - für die untere rechte Ecke und der vierte - für die untere linke Ecke:

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

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

Результат: