Border Radius Generator

Tune top-left, top-right, bottom-right, and bottom-left radii—or elliptical pairs—with link/unlink, random, and live CSS.

Introduction

Rounded corners communicate softness and modernity across buttons, images, modals, and chips. CSS border-radius supports one value for all corners, four values for individual corners, and the slash syntax for elliptical radii that shape pill-like or organic silhouettes. This generator exposes those options with sliders and a live shape so you can match mockups without editing CSS by hand for every experiment.

Linking corners keeps a symmetric radius for design systems. Unlinking unlocks asymmetric “squircle-like” or speech-bubble shapes. Elliptical mode reveals independent horizontal and vertical radii for each corner—powerful for badges and avatar frames.

How it works

Sliders update the preview element’s border-radius and rewrite the CSS output field. Linked mode copies the top-left value to all corners. Elliptical mode emits the x / y form. Random generates playful values for inspiration; clear zeros all radii; reset restores a sensible default.

Common use cases

Component libraries document radius tokens (sm/md/lg). Marketing pages style hero cards. App UI builds floating action buttons. Accessibility-minded teams still verify that focus rings follow the same outer shape as the control.

Benefits

Immediate visual feedback, full CSS syntax support, keyboard-accessible ranges, and zero uploads. Combine with Box Shadow Generator for complete surface styling.

Consistency across components

Pick a radius scale (for example 4, 8, 12, 16, 24, full) and reuse it. Mixing arbitrary radii makes interfaces feel inconsistent. Fully rounded pills use large radii relative to height; cards often sit between 8px and 16px. Elliptical radii are powerful for organic marketing shapes but should be used sparingly in dense product UI.

When images sit inside rounded containers, ensure overflow: hidden is applied on the parent so media respects the corner curve. Focus outlines should follow the same radius for a polished keyboard experience.

Random mode is for exploration only—lock production values into tokens after review. Pair with Box Shadow Generator so elevation and corner style feel intentional together.

Copy CSS into design tokens early, then reference those tokens in components instead of pasting raw values repeatedly. That workflow keeps brand evolution manageable when marketing later asks for slightly softer corners sitewide.

Examples

Uniform

border-radius: 16px;

Four corners

border-radius: 24px 8px 24px 8px;

Elliptical

border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;

FAQ

What does link corners do?
When linked, changing any corner (via top-left slider) keeps all corners equal.
What is elliptical radius?
It sets different horizontal and vertical radii using the CSS slash syntax.
What is this Tool about?
This tool makes it easy for you to generate and visualize shapes with inverted border radii, and export it for CSS.
What is an inverted corner?
An inverted corner (also called: inverted border radius) is the inverse of a border-radius. it's used in modern UI designs.
What is the browser support for inverted corners?
Browser support may vary depending on the exportation method. Modern Browsers have good support for the clip-path: url() | path() and mask property. check Can I use for exact compatibility of each available option.
Why corner-inverter instead of other Vector tools?
Corner Inverter was built specifically with CSS in mind, providing web-ready export options like clip-path and CSS masks.
Can I add a border or outline to the generated shape?
Standard CSS border and outline properties do not follow the contours of masked or clipped shapes. The official CSS specification to fix this is border-shape: shape(), but unfortunately, no browser supports it yet. The good news is that this tool handles the workaround for you! If you adjust the border settings in the generator, it outputs a ready-to-use CSS solution. The exported code uses two similar but not identical shapes: one for the main fill and another slightly larger shape to simulate the border.
Will hover effects and clicks trigger on the empty inverted corners?
It depends on the method you choose! If you use the CSS clip-path method, pointer events (like clicks and hovers) are strictly confined to the visible shape. Users can click right through the empty inverted corners to elements underneath. If you use the CSS mask method, the element still retains its original rectangular hit area.

Related tools