CSS Border Radius Generator

About the CSS Border Radius Generator

Design the border-radius of any element. In Corners mode you set each corner — top left, top right, bottom right and bottom left — together or one by one, in px, % or rem. In Elliptical mode every corner gets its own horizontal and vertical radius, the full 8-value syntax h h h h / v v v v, and you shape the box by dragging round handles along its edges: with Organic shape on, the two radii of each edge always add up to the whole edge, which gives the smooth blob shapes often called “fancy border-radius”.

The preview shows the shape on a box of the size you choose, or on an image from your device (it never leaves your browser). When radii are too large for the box, the page tells you exactly how far browsers shrink them. Copy the CSS shorthand, the four longhand properties, or Tailwind CSS classes for v4 or v3.

Common uses

• Cards, buttons, inputs and modals with consistent corner radii from a design system.
• Pills, tabs, chat bubbles, leaves and drops for UI accents.
• Organic blob frames for avatars, hero images and decorative backgrounds.
• Translating a radius from a design file into Tailwind classes.

How border-radius and the slash work

Each corner of a box is a quarter of an ellipse with a horizontal and a vertical radius (CSS Backgrounds and Borders Level 3 §5). The values before the slash are the horizontal radii, the values after it the vertical radii, both in the order top-left, top-right, bottom-right, bottom-left; one to four values per list follow the same shortening rules as margin (10px 20px means top-left and bottom-right 10px, the other two 20px). Without a slash the corners are circular.

Percentages are taken from the box: horizontal radii from its width, vertical radii from its height. That is why border-radius: 50% makes a circle on a square but an ellipse on a rectangle, and why % corners on a wide card look stretched.

When radii are larger than the box

Corner curves may not overlap. When the two radii along any side add up to more than that side, browsers multiply every radius by f = min(Lᵢ ÷ Sᵢ), where Lᵢ is the length of a side and Sᵢ the sum of the two radii on it (§5.5 Overlapping curves). Example: 80px corners on a 200 × 100 box give 160px on the 100px sides, so f = 100 ÷ 160 = 0.625 and every corner is drawn at 50px. The same rule makes the common 9999px turn any box into a pill: the radius shrinks to half the height. The preview shows f and the radii actually drawn whenever this happens.

Organic “blob” shapes

An elliptical radius can span the whole edge. If the two radii on the top edge add up to 100% (say 42% + 58%), and the same is true for the other three edges, the curves meet without a straight piece in between and the box becomes a smooth, rounded blob whose shape moves as you drag the meeting points. Organic mode keeps those sums at 100% while you drag; untick it to set all eight radii freely — straight stretches appear where a pair adds up to less, and the overlap rule above shrinks the shape where it adds up to more.

Limitations

• border-radius always draws elliptical arcs. Squircle, bevelled, notched or scooped corners need the newer corner-shape property (CSS Borders Level 4), which only Chrome and Edge 139+ support so far (MDN browser data), or SVG, clip-path or mask; this tool does not write it.
• rem values and the Tailwind mapping assume the browser default root font size of 16px.
• Paste a value, a declaration or a whole CSS rule: the border-radius shorthand and its four longhands (such as border-top-left-radius) are read in order, other properties are ignored. All corners must use one unit; calc() and var() are not read.
• The preview shrinks large boxes to fit small screens; px and rem corners shrink with it, so the proportions stay true.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.