Loading page
About this tool
Generate border-radius rules visually. Custom simple and advanced 8-value organic border styles with interactive controls.
The CSS Border Radius Generator builds a `border-radius` value from sliders in two modes: a simple four-corner shorthand in px or %, and an advanced eight-value form written as four horizontal radii, a slash, then four vertical radii — the syntax that produces organic blob shapes. It is for designers and front-end developers who want to see the corner curvature on a live preview before committing the rule. The output is a ready-to-paste declaration, copyable in one click or downloadable as a .css file.
Open CSS Border Radius Generator on AltFTool — it loads instantly in your browser.
Pick Simple Mode for a four-corner radius, or Advanced Mode for the 8-value organic shorthand; in Simple Mode you can also switch the unit between % and px.
Drag the Top-Left, Top-Right, Bottom-Right and Bottom-Left Corner sliders, or apply a Quick Shape Preset such as Soft Card, Circle/Oval or Organic Blob.
Watch the Live Preview redraw, then press Copy in the Generated CSS Code panel to take the border-radius declaration, or Download to save border-radius-styles.css.
The four-corner shorthand covers cards and pills; the advanced `.. / ..` form exposes horizontal and vertical radii separately, which is the only way to make asymmetric organic shapes.
Gradient, grid, dark and light backgrounds are switchable, so you can check the silhouette reads correctly against whatever the shape will actually sit on.
Circle, card, shield, leaf and organic presets set every slider at once, giving you a working starting point rather than eight zeros.
Values before the slash are the horizontal radii and values after it are the vertical radii, in the order top-left, top-right, bottom-right, bottom-left. So `30% 70% 40% 60% / 30% 40% 70% 60%` gives each corner an ellipse rather than a circular arc, which is what creates a blob.
Use px when you want a fixed curve that stays the same on every element size — a 16px card corner, for example — and percent when the curve should scale with the box. Percent is relative to the element's own width and height, which is why 50% on all four corners turns a square into a circle.
Set all four corners to 50% on an element whose width and height are equal. The circle preset does exactly that; if the box is not square you get an ellipse instead.
In simple mode, 0–100 when the unit is percent and 0–200 when the unit is px. The advanced eight-value mode is always percentage-based, with every one of its eight sliders running 0–100.