What is the 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
withpath()
- 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 large 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.