CSS Inverted Border 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
• using clip-path with path()
• setting a mask image

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 three 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

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 suggest going this way only with elements that have fixed and small sizes like 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 aspect ratio of the shape, or otherwise you will get 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;
}

Examples using this tool

See the Pen examples of inverted corners with mask by Driss (@driss-d) on CodePen.

FAQs