CSS Border Radius Generator

Pixels give you a fixed curve size regardless of the element size — "10px" always rounds corners by 10 pixels. Percentages scale relative to the element dimensions — "50%" on a 100px square gives a 50px radius. Use px for consistent-looking buttons and cards at any size. Use % for shapes that should scale proportionally, like circles or pill buttons.

Unlink the corners using the link toggle, then adjust each corner slider individually. The CSS shorthand for four separate values is: border-radius: top-left top-right bottom-right bottom-left. For example: "border-radius: 10px 20px 30px 40px" sets each corner differently going clockwise from the top-left.

When all four corners are equal, CSS shorthand lets you write just one value: "border-radius: 16px". When two pairs are equal (top-left/bottom-right vs top-right/bottom-left), you write two values: "border-radius: 10px 20px". The tool always generates the most concise shorthand for your values.

A pill shape has fully rounded left and right ends and flat top and bottom edges (or vice versa). You get it by setting a very large border-radius — typically "9999px" or "50%" — on a rectangular element. The browser clamps the radius at half the shorter dimension, producing perfect semicircles on each short end. Use the Pill preset in this tool.

Yes. The tool supports px and % as unit options. If you need em or rem units for a design system, note the pixel value and convert it in your CSS manually. The border-radius property accepts any valid CSS length unit (px, em, rem, %, vw, etc.) — the tool generates px and % since those are most common.

Yes. border-radius clips the entire box, including background images and colors. If you also have overflow:visible on the element, child elements may still overflow the rounded corners — add "overflow: hidden" to clip them too. The rounded corners apply consistently to the background, border, and box-shadow.

No. Everything runs in your browser via JavaScript. No CSS values, no design data — nothing leaves your device.