Inverted Round Corners in CSS

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

CSS all corners rounded
All corners rounded
width: 200px;
height: 50px;
border-radius: 15px;

CSS two opposing corners rounded
Two opposing corners rounded
width: 200px;
height: 50px;
border-radius: 15px 0;

CSS leaf
Leaf
width: 50px;
height: 50px;
border-radius: 20px 5px;

CSS circle
Circle
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.

CSS inverted round corners
Inverted round corners

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.

Leave a Reply

Your email address will not be published.