Inverted Round Corners in CSS

Creating round corners has been very easy since the browsers implemented border-radius property.

width: 200px;
height: 50px;
border-radius: 15px;

---

width: 200px;
height: 50px;
border-radius: 15px 0;

---

width: 50px;
height: 50px;
border-radius: 20px 5px;

---

width: 50px;
height: 50px;
border-radius: 50%;

Inverted Round Corners

This one is not as simple as using standard round corners because there is no CSS property to do it directly, so we have to find an alternative solution.

We are using image masking which will subtract a shape from our object or in this case we subtract a circle from each corner.

width: 200px;
height: 100px;

-webkit-mask-image:
     radial-gradient(circle at top left, transparent 0, transparent  20px, black 21px),
     radial-gradient(circle at top right, transparent 0, transparent  20px, black 21px),
     radial-gradient(circle at bottom left, transparent 0, transparent  20px, black 21px),
     radial-gradient(circle at bottom right, transparent 0, transparent  20px, black 21px);
-webkit-mask-position: top left, top right, bottom left, bottom right;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 50% 50%;
mask-image:
    radial-gradient(circle at top left, transparent 0, transparent 20px, black 21px),
    radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px),
    radial-gradient(circle at bottom left, transparent 0, transparent 20px, black 21px),
    radial-gradient(circle at bottom right, transparent 0, transparent 20px, black 21px);
mask-position: top left, top right, bottom left, bottom right;
mask-repeat: no-repeat;
mask-size: 50% 50%;

Using vendor prefix “webkit” because Chromium based browsers only support the vendor prefixed version, Firefox being the only non webkit based browser does support both properties with and without webkit vendor prefix.