1. Straighten out the corner

The first step that we have to do is actually a really tiny one, but already get’s us halfway there: we have to remove the border radius from the corner where we want to add the inverted corner. We can simply do this by updating the border-radius value in our css.

Already halfway done! (Codepen)

2. Create pseudo element

The trick to making the inverted border radius (at least using this method) is to create a pseudo element, and then cut a normal border radius out of that element. Let’s set up the pseudo element, and let’s at the same time already add the border radius to it to speed life up a little bit!

(The background color in the pseudo element should be transparent, here I set it to blue to make visible how this is working).

That looks kind of funky, but i can see where we’re going! (Codepen)

3. Adding a shadow to the pseudo element

This is what makes the border radius go outwards! What we want to do is fill the space between our div and our pseudo element, so that if we give it the same color as our div, it looks like an inverted border radius! The best way to fill in this color for us is using a box-shadow. By adding a box shadow to the pseudo element and moving it upwards, without any blur, we get the effect we are looking for!

Getting there, getting there! (Codepen)

And when we change the colors to what they should be, the pseudo element background color to transparent and the shadow color to red(ish), we get our oh so shiny inverted border radius!

We did it! (Codepen)

Below you will find the full CSS code for this example.