# Border Radius Generator — Drag Eight Handles, Copy The CSS > Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles. A corner is four independent things: how far it reaches sideways, how far it reaches down, whether it curves away from the box or into it, and how square the curve itself is. Drag the eight handles on the preview to set the first two — that is the a / b eight-value syntax, and it is what makes a blob or an egg rather than a rounded rectangle. Cut a corner and it bites inward, which border-radius cannot express at all; raise the squircle exponent and the curve flattens toward the iOS corner. The tool says which CSS each shape needs and hands you border-radius, clip-path, an SVG clipPath, a mask or a Tailwind class to match. **URL:** https://convertto.tech/t/border-radius-generator **Category:** CSS Generators (https://convertto.tech/c/css-generators) **Privacy:** Runs entirely in the browser; no upload **Cost:** Free, no sign-up **Last updated:** 2026-08-01 ## Key facts - **Handles:** Eight, one per corner per axis — the full elliptical syntax - **Corners:** Rounded, inverted or squircle, set per corner - **Output:** border-radius, clip-path, SVG clipPath, mask, Tailwind, SVG and PNG - **Accuracy:** Applies the CSS overlap correction, so the preview matches the browser - **Privacy:** Runs entirely in your browser — nothing is uploaded - **Cost:** Free, unlimited, no sign-up ## How to use 1. Pick the box size you are designing for — corners read differently on a button and a card. 2. Drag the handles, or unlink the corners and set them one at a time. 3. Cut a corner to curve it inward, or raise the squircle slider to square the curve off. 4. Copy the format your stack wants, or export the shape as SVG or PNG. ## FAQ ### What is the difference between px and % for border radius? Pixels give a fixed corner size regardless of element dimensions. Percentages resolve against different bases per axis — horizontal radii against the width, vertical against the height — so 50% turns any box into an ellipse and keeps doing so as the element resizes. ### Why did my radius get smaller than the number I set? If two radii on the same side add up to more than that side, CSS shrinks every radius on the box by one shared factor until they fit. That is why 80% + 80% behaves like 50% + 50%. The preview applies the same correction and shows the factor, so what you see is what the browser will draw. ### What is an inverted corner and why can border-radius not do it? It curves into the shape rather than away from it, like the join between a tab and the bar it sits on. border-radius only describes convex elliptical corners, so an inverted one needs clip-path or a mask. It also meets its edges at a right angle by necessity: no arc that bulges inward can be tangent to both sides of a square corner. ### What does the squircle slider actually change? The exponent of the curve. A normal corner is a quarter ellipse, which is the exponent 2 case of (x/a)ⁿ + (y/b)ⁿ = 1. Raising n keeps the same corner size but flattens the curve toward the box, which is the continuous corner Apple uses; lowering it below 2 pulls the corner to a point. Only n = 2 has a border-radius form, so anything else is exported as a path. ### Which output should I use? border-radius whenever it can draw the shape — it costs nothing, animates between values and scales with the element. clip-path: path() is pixel-absolute, so it suits a fixed-size button. The SVG clipPath is normalised to the element box, so one definition fits any size, and it has the widest support for the shapes border-radius cannot reach. A mask keeps the element paintable but needs a matching aspect-ratio or the shape crops. ### Why does my border disappear on a clipped element? clip-path clips everything the element paints, the border included. The usual workaround is to draw the outline as an SVG stroke over the same path, which is what the preview and the SVG export both do. ## Related tools - [CSS Clip Path Generator](https://convertto.tech/t/css-clip-path-generator): Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path. - [Blob Shape Generator](https://convertto.tech/t/blob-shape-generator): Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size. - [CSS Shape Generator](https://convertto.tech/t/css-shape-generator): Generate triangles, arrows, stars and other shapes using pure CSS. - [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour. - [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states. - [Glassmorphism CSS Generator](https://convertto.tech/t/glassmorphism-generator): Create frosted-glass CSS with backdrop blur, transparency and a subtle border. - [CSS Gradient Generator](https://convertto.tech/t/gradient-generator): Build linear, radial and conic CSS gradients and copy the code. - [Type Scale Generator](https://convertto.tech/t/type-scale-generator): Build a modular typographic scale and copy it as CSS custom properties. - [Neumorphism Generator](https://convertto.tech/t/neumorphism-generator): Generate the paired light and dark shadows that make an element look pressed into or raised from its background. - [nth-child Selector Generator](https://convertto.tech/t/nth-child-generator): Build an :nth-child formula and see which items it selects out of a row.