Border Radius & Clip-Path Generator

about this tool

Border radius, all eight values

A corner is a quarter-ellipse with a horizontal and a vertical radius, so border-radius really holds eight numbers: four before the slash, four after. The editor shows four when the two sets match and eight when you separate them, in px or %, and writes the shortest legal form — 8px for a uniform corner, 10px 20px when opposite corners agree, the slash only when the vertical radii differ, and each side of the slash collapsed on its own, as the specification allows.

The overlap rule is the part everyone trips on. When two radii along one edge add up to more than that edge, the browser scales every radius by the same factor until they meet, so border-radius: 70% on any box is drawn as 50%. The preview reports the factor for a 240 × 160 box whenever it is below one, so the shape on screen is explained by the numbers next to it. The random blob button keeps each edge's pair summing to exactly 100%, which is what makes the classic organic blob one continuous curve.

Tailwind's named radii (rounded-xs through rounded-4xl, rounded-full) are recognised; anything else is written as rounded-[…].

Clip path, the four basic shapes

polygon() takes a list of points in percentages of the element's own box, which the editor lets you drag on the preview or type as numbers; a point can be added on any edge and removed down to three. Regular polygons and stars are generated for any number of sides, and the shape can be flipped either way. circle() and ellipse() take radii and a centre — a percentage radius is measured against √((w²+h²)/2), which surprises people, so the closest-side and farthest-side keywords are offered alongside — and inset() takes four offsets with optional rounded corners. The preview states how much of the box remains visible.

Tailwind has no clip-path utilities; the tool writes the arbitrary property form, [clip-path:polygon(…)], with underscores for spaces.

Importing

Paste either property, with or without its name. Border radius accepts one to four values on each side of one slash in px or %, and refuses em, rem and negatives with the reason. Clip path accepts the four basic shapes in percentages, with at positions as percentages or words, the fill-rule keyword on polygons, and the shorthand defaults (circle() alone is closest-side at the centre). path(), url() and pixel coordinates are refused with a message saying so.

Limits

Everything is in percentages or pixels; other units are not converted. The overlap factor is computed for the 240 × 160 preview, since the real factor depends on the element's size. Polygon points are clamped to the box, so a shape that deliberately overshoots the edges must be typed by hand afterwards. path() and shape() clip paths are not edited here. Nothing is stored between visits.

The other shape and depth generators pair with this one: box shadow for elevation, and glassmorphism & neumorphism for the two effects that combine radius, shadow and blur.

questions

What does the slash in border-radius mean?

Values before the slash are the horizontal radii of the four corners and values after it are the vertical radii, so each corner becomes a quarter of an ellipse rather than a circle. border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% is the classic organic blob. Without a slash each corner is circular.

Why does border-radius: 70% not look like 70%?

Because the two radii sharing an edge add up to 140% of it, and the specification says the browser must scale every radius by the same factor until they just meet — here 100/140. The tool reports that factor so the numbers you write match the shape you see. Keep adjacent radii summing to 100% or less to avoid it.

How do I make a hexagon or triangle in CSS?

With clip-path: polygon(). A triangle is polygon(50% 0%, 100% 100%, 0% 100%); a regular hexagon is six points on a circle, which the tool generates for any number of sides, along with stars. Points are percentages of the element’s own box, so the shape scales with it, and everything outside the polygon becomes transparent and unclickable.

What is the difference between circle(50%) and circle(closest-side)?

A percentage radius in circle() is resolved against √((width² + height²) / 2), a compromise between the two dimensions, so 50% is neither half the width nor half the height. closest-side makes the circle touch the nearest edge and farthest-side the farthest, which is usually what people mean.

Can Tailwind do clip-path?

Not with a built-in utility. Use the arbitrary property syntax the tool writes, [clip-path:polygon(50%_0%,100%_100%,0%_100%)], with underscores for spaces. Border radius does have utilities — rounded-lg is 8px, rounded-full is 9999px — and the tool names them when your values match; otherwise it writes rounded-[…].