CSS Inverted Border Radius Generator

What is this CSS Corner Inverter Tool?

CSS doesn't natively support a simple method for inverting the border-radius of elements. Currently, achieving this effect requires complex workarounds that involve complex calculations and a lot of manual effort.

This is where the CSS Corner Inverter Tool comes to the rescue. It allows you to effortlessly generate smooth SVG shapes with inverted corners, ready to be used in your CSS. This tool saves you time and eliminates the hassle of tedious calculations, so you can focus on what matters most—designing.

How to Create Inverted Borders?

There are several ways to create an inverted border effect in CSS, including:

• Applying radial-gradient images or box shadows to pseudo-elements or other elements that are positioned over each corner.
• Using clip-path with path() or shape() functions.
• Setting a mask image
• Using SVG <clipPath> with clipPathUnits="objectBoundingBox" and referencing it in CSS with clip-path: url()

Each method has its limitations, but they all share a common drawback—they can be complex, and frustrating to implement.

Practical Ways to Use the Generated Shape in Your Project

There are four ways in which you can integrate the exported shape into your projects.

1. Download/Copy SVG

The first and simplest option is to use the SVG directly as a decorative object on your website or even outside of the web.

This can be done by downloading the SVG to use it as an image or by embedding the SVG code directly into your HTML.

2. Copy clip-path: path()

Use the clip-path CSS property combined with the path() function to crop your elements into the exported shape.

One thing to keep in mind is that the path() function uses absolute values that are not relative to the element's size. This means the cropped area won't scale up or down with the element dimensions, making it non-responsive for larger elements.

I recommend using this method only for elements with small, fixed dimensions, such as buttons.

clip-path: path("M45,0H118A12,12 ... ");

3. Copy CSS Mask

The third and scalable option is using the mask property with an SVG data URI, unlike the clip-path approach, this will grow and shrink with the element and won't cause you any issues—as long as the aspect ratio of the element matches the shape's aspect ratio. Otherwise, you may experience unwanted cropping.

To maintain the correct proportions, use the CSS aspect-ratio property with the exact values shown next to the shape's dimensions in this tool.

div {
  aspect-ratio: 16 / 9;
  mask: url('data:image/svg+xml,...') no-repeat center / contain;
}

4. Copy SVG <clipPath> element

This method is the most widely supported. While the CSS clip-path: path() function uses absolute values and isn't responsive, using an SVG <clipPath> element with clipPathUnits="objectBoundingBox" and normalized coordinates (ranging from 0 to 1) makes the clip responsive and will scale to fit the element's size automatically.

Just reference the clip path in your CSS using clip-path: url("#clip").

<svg xmlns="http://www.w3.org/2000/svg">
  <clipPath id="clip" clipPathUnits="objectBoundingBox">
    <path d="M0.2,0H0.3...0Z"/>
  </clipPath>
</svg>

5. Copy shape() — Future CSS

The future of web design lies in the powerful new shape() function to handle inverted corners and complex polygons. We can use it in two ways:

With the clip-path:

With the powerful border-shape:

"Unlike clip-path, which simply masks an element, border-shape actually redefines the “box” itself."

Because it fundamentally changes the CSS box model, standard properties like border, padding, and box-shadow will flawlessly follow the exact contours of your inverted corners. Text will even wrap naturally inside the custom shape!

Resources

• How to Make an Inverted border-radius in CSS (with diagrams)