Border Radius Generator
Shapes each corner independently, including the two-value squircle syntax, and emits the CSS.
Rounds the corners of a box with all eight radius values available, and — because "make this a squircle" arrives as the same question — also draws real superellipse and `clip-path` shapes, which `border-radius` cannot.
Preview
CSS
Corners
Top left
Top right
Bottom right
Bottom left
Presets
clip-path
A different property with a different job. border-radius rounds a box; clip-path cuts an arbitrary shape and takes the shadow with it.
How to use it
Drag the corner sliders
Four corners in px or per cent. The preview and the declaration update together.
Turn off "same on both axes" for the blob shapes
That gives the eight-value slash form, where each corner has a horizontal and a vertical radius. Every organic blob shape comes from that form.
Switch to clip-path when the shape is not a rectangle
Circles, polygons, a speech bubble, a chevron — and the superellipse slider, which is the actual squircle curve rather than a rounder rectangle.
Common questions
Why does a 9999px radius look the same as 50%?
Because when the radii on one side would overlap, the specification scales *all four* by the same factor until they fit. So any absurdly large value collapses to the same shape, and the page shows you the factor it used.
Can CSS draw a real squircle?
Not with `border-radius` — that corner is strictly elliptical, so a "squircle slider" bolted onto a radius is just a rounder rectangle. The superellipse here is drawn as a `clip-path` polygon, which is the honest way to get the curve today.
Why did my shadow disappear with clip-path?
Because `clip-path` cuts the element, and the shadow is drawn outside the element. It also cuts overflowing children. `border-radius` does neither, which is why it stays the right tool whenever the shape is a rounded rectangle.
How do I round only the outer corners of a group?
Round the container and give it `overflow: hidden`, or use `:first-child`/`:last-child` on the items. A per-corner radius on the group itself will not reach the children, which is what usually goes wrong with a button group.
Feed it from
Next
These accept what this tool produces, so the result can go straight in.
Fluid Size Calculator
Computes a clamp() expression that scales a size smoothly between two viewport widths.
CSS Beautifier & Minifier
Formats or minifies CSS without reordering anything, preserving the token stream exactly.
Box Shadow Generator
Composes layered box and text shadows with a live preview and emits the CSS.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.