Creating Inverted Border Radius Shapes using CSS

Have you ever wondered how to create those cool inverted border radius shapes using CSS? Well, I was mindlessly scrolling on Twitter the other day when I saw I had a mention from none other than Florin Pop, where he was pulling me into a discussion on how we could make something like this with inverted border radiuses using CSS. So, I decided to take on the challenge.

Getting Started

My first suggestion was a simple mask image, but some people in the discussion wondered if it would be simpler to come up with a CSS solution that didn't involve making a mask in some vector software first. So, I immediately went over to CodePen and started hacking away.

First up, I saw this as three boxes with one of them overlapping, and nowadays for me, overlapping content means CSS grid. I created the three divs where everything would live inside of in my HTML.

Adding Background Images

I needed to get a picture of a house, so luckily in CodePen there's that handy little assets button down at the bottom that lets you search through Unsplash, and eventually, I found the perfect one. Before mucking around with trying to get those inverted border radii, the first thing I had to do was just get the layout in place.

Creating a Simple Grid and Styling

I made a very simple grid to position everything properly on the page and added a little bit of styling just to sort of get us in the right direction so I could focus on making those little corner bits.

Adding Border Radiuses

My first thought for creating the spacing around all of these was to use a gap, which presented a little bit of an issue because that gap didn't really go everywhere I needed it to be and it also created a gap where I didn't actually want one to be, but it still seemed like the logical first step. At least it gave me a little bit of that spacing that I did need.

Custom Properties and Box Shadows

Now, not sure how I was going to fill in all the rest of those empty spaces, the first thing I started doing was bringing in the border radiuses on everything just so I could be making some forward progress while I was stuck on other stuff. I set them all up as a custom property because I wanted them all to be the same and I had to apply them in a lot of different places. Having one custom property that can control them all made it easier if I ever needed to change things down the line.

I was also having a little bit of trouble with seeing everything I was working on, so I changed the background color to Red just so I could see it. Whenever you're doing CSS stuff and things aren't super clear, just throw a random bright color on something so you can get it exactly where you need it to be, and then you just put the color back to what you need.

With all of that done, I was basically back to wanting to get all the spacing correct for the white lines sort of looping around so I could finally focus on those inverted border radius parts.

Creating Inverted Border Radius Shapes

To be able to create those inverted border radiuses, there were two things I needed- black to go underneath it and white to go around it. My first idea was to use an outline which created that white gap around the entire thing and looked like it was exactly what I needed it to be. Then I was going to fill in the empty space underneath it with a box shadow, because if you don't give those a blur, they'll just be a solid shape that you can offset, and it would be exactly what I need.

Except I ran into the issue where box shadows actually render underneath outlines, and it took me a while to figure out why my box shadow wasn't working. I got a little bit frustrated but then realized what the issue was. My first instinct was to go to a pseudo-element because I love pseudo-elements, but then I thought, "wait a second, I'm using a box shadow as a solid shape. I could just put two box shadows on here; one of them being black that's just going to be offset downwards that will fill in that space underneath, and the other one being white with no blur, no offset in any direction but having a spread on it which basically replicates the outline that I originally had."

With that, I had everything in place. The layout was basically there, though there were a few little tweaks we could do to fix it up a bit. But it was time to try and tackle those corner bits.

Using Radial Gradients

The idea that I had for the corner bits was using a radial gradient in a way to hide content away basically but because the corners were so small, I wanted to make sure my idea would even work. So, I opened up a new CodePen and started playing around with a radial gradient just to make sure that I could line things up the way I wanted them to.

Basically, what I discovered is if you do a radial gradient with a circle at 100%, and the color stops for both of them are at the same place, then you get this shape here. We can keep the part that we want and we can hide the other part, so I created two pseudo-elements using my before and after on the house image, which is that top div. It's not on the image itself because we can't have pseudo-elements on images, and so in a way, it was lucky that I put a div and then put the image inside of there.

Positioning the Elements

I had to figure out how big I wanted them to be and what I did is create a locally scoped custom property called size that was then referencing my border radius. I'm not sure if this is the best idea, but it seemed to make sense that the radius would correspond to how big I needed things to be, so I went with it. Then I just brought in that same trick, but instead of 500 pixels by 500 pixels, I made it the same size as our border radius, which is one REM.

It came time to position these little guys in the right place, and while this could be really hard, and we could definitely just sprinkle some random numbers on it until we can get it into the right place, position absolute actually works fantastically with Grid because you can actually assign specific grid columns and rows to absolutely positioned elements. The top, bottom, left, and right properties will be relative to those grid cells that you've assigned, rather than to the entire element, meaning we could get into the exact little corners we wanted to get without having to magic number our way there.

Final Tweaks

At this point, I was really happy with the results, but there were two problems. One of them was the really grainy little corners that did not look super smooth like that one above that's being created with the Box Shadow. The inner radius and the outer radius were actually different from one another, so it looked a lot more natural. The one I have in this corner looks kind of funky.

Improving the Corners on a Design with Custom Properties in CSS

When working on a design, details matter. One of the aspects that can make or break the overall look and feel of a design are the corners. Unfortunately, corners created with CSS can sometimes look jagged and grainy, while lacking the natural look that we desire.

In this article, we share our experience in improving the corners of a design using custom properties in CSS. By leveraging custom properties and using some clever CSS tricks, we were able to create smooth, organic-looking corners that adapt to changes easily.

Here are the steps we took to achieve this:

1. We noticed that the corners in our design were not smooth and looked jagged, which detracted from the overall aesthetic. By comparing it to a smooth corner created with Box Shadow, we decided to modify the border radius on the black corners to match that of the smoother one.

2. Using custom properties, we were able to simplify the process of resizing the border radius, a feature that would come in handy later on when we needed to make a change.

3. Next, we tackled the issue of the graininess on the corners. To fix this, we used a calc function on the positioning of the color stops in our gradient. One of the color stops was based on the size custom property we created, while the other color stop was adjusted by adding one pixel to it. This created a subtle blur effect on the corners, which eliminated the graininess and kept the corners looking sharp.

4. We were pleased with how the custom properties allowed us to adapt the design quickly and efficiently for any updates we needed to make later. For instance, resizing the border radius only required us to change one value, rather than hunting down ten different places where the value was being used.

Improving the corners of a design may seem like a small detail, but it can significantly impact the overall look and feel of the design in a positive way. By leveraging custom properties and some clever CSS tricks, designers can create smooth and natural-looking corners that are highly adaptable and look amazing.Overall, creating inverted border radius shapes using css is not the easiest task, but with the right approach and some tweaking, you can definitely achieve a stunning and unique design. hopefully, this article has given you some valuable insights