Corner Shape

Some examples of the new corner-shape property. At the time of writing this is only available in chromium browsers.

.box {
    border-radius: 2em;
    corner-shape: round; /* the default */

    /* other possible values: 
    squircle, square, scoop, bevel, notch, superellipse() */
}

All of these have a border-radius set to 2em.

The superellipse() function takes values from negative infinity to infinity. At 0 it produces a bevelled corner. At negative infinity it produces a notch corner and at infinity a square corner.

Below the superellipse() values are going from negative infinity to infinity and back. The border-radius value is unchanged.