How to apply the Ubuntu style to web apps

„Ubuntu shape”

The smooth mathematical curves, that the Ubuntu Touch interface inherited from Ubuntu's beautiful font, are not simple sections of a circle.
As such, they can not be authentically imitated using CSS border radius. Even Ubuntu's GTK3 theme as well as the QML theme solve the challenge by using pixmaps.
Luckily CSS doesn't stand behind, so why shouldn't we leverage its full potential?

.ubuntu-shape {
  border: 15px solid transparent;
  border-image: url('./ubuntu-shape.png') 40 stretch;
  /* A background color would cover the area behind the corners of
  the border, so we use a box-shadow for the fill */
  box-shadow: 0 0 0 1000px #dd4814 inset;
}

Download the attached HTML and image assets to see it in action or inspect it. Hover the orange boxes to compare Ubuntu's rounded corners with default CSS border-radius.