A border-radius maker online is a visual tool that sets each of the four CSS corners independently, previews the curve at the box's real dimensions, and copies the shortest correct border-radius declaration in one click. The shorthand reads corners clockwise: top-left, top-right, bottom-right, then bottom-left. When a single value applies to all four corners, the generator emits one token; when opposite corners share a value, it can output two; when the top-right and bottom-left share a value with the other two different, three; otherwise all four values appear in order. That compression matches what CSS itself reads, so the copied declaration stays the shortest readable equivalent. The preview uses the generated shorthand itself, which exposes a serialization mistake before the declaration reaches your stylesheet. Both pixels and percentages are supported: pixels stay fixed as the box resizes, while percentages are measured against the border box and produce pills, ovals, leaves, and strongly asymmetric shapes. Every value must be nonnegative, since CSS does not allow negative corner radii, and zero simply creates a square corner.
How the CSS shorthand reads
Most developers expect a four-value border-radius to follow the visual order of an element's corners in reading order, but the property actually walks the box clockwise starting from the top-left. According to the MDN documentation for border-radius and the underlying CSS Backgrounds and Borders specification, with four values the order is top-left, top-right, bottom-right, then bottom-left. With two values, the first applies to top-left and bottom-right while the second applies to top-right and bottom-left, producing diagonal pairs. With three values, the middle value is shared by top-right and bottom-left.
The CSS Border Radius Generator labels every corner explicitly, so those mappings are handled for you. Each value feeds its own labeled input, the preview uses the compressed result, and the declaration that ends up on your clipboard is already valid CSS shorthand. That mapping matters because swapping the order silently produces different curves on a non-square box, especially when mixing pixels and percentages in the same declaration.
How to use a border radius maker online
The full workflow takes only a few clicks once the box's intended dimensions are decided. The tool is intentionally narrow: one radius per corner, in clockwise order, with a single unit choice, so the focus stays on shaping the curve rather than configuring controls.
- Enter a radius for each corner in clockwise order.
- Choose pixels for fixed curves or percentages for size-relative curves.
- Inspect the preview at the displayed box dimensions.
- Copy the compressed declaration and test it on the real component.
The preview reflects whatever the generator is producing in real time. A corner typed as 8px renders exactly as 8px; a corner typed as 50% renders as half of the relevant border-box dimension. Because the preview uses the compressed shorthand itself, a typo like a missing percent sign or an extra zero surfaces immediately as a square corner rather than showing up only after the stylesheet refreshes in the browser.
Pixels vs percentages for the same look
Both units produce a valid border-radius, but they behave differently once the box is resized. The table below summarizes how each unit responds to changes in element width and height.
| Unit | Source of size | Resizes with the box | Typical use |
|---|---|---|---|
| px | Specified number | No, fixed | Buttons, inputs, fixed-size cards |
| % | Border box dimension | Yes, along one or both axes | Pills, ovals, organic panels |
Pixel radii keep their absolute curve even on a smaller screen, so a button that rounds to 8px at 1200px wide still rounds to 8px at 480px wide. Percentage radii are calculated from the dimensions of the border box, so a 50% value behaves like 50% of half the width on the horizontal axis and 50% of half the height on the vertical axis. Applied to a square, 50% creates a circle. Applied to a wide rectangle, the same 50% becomes an ellipse-like end, which is exactly what pills need on rectangular buttons.
Choosing between them is mostly about intent. For a uniform card that should look the same across breakpoints, start with pixels between 12 and 24, as recommended in the generator's own starting values. For a pill that should adapt as the label grows, use a large pixel value such as 9999px, or 50% provided the element has enough horizontal padding. For an organic panel that should feel hand-shaped, vary all four percentages so no two corners match.
Why an extreme radius can look smaller than expected
Browsers may proportionally reduce the used radii when adjacent curves would overlap. The CSS spec states that when two corner curves would intersect, the browser normalizes each value down so the curves fit inside the border box without colliding. This is standard browser behavior and it is not an error in the copied declaration.
In practice this means that requesting 5000px on a 200px by 200px box does not draw a 5000px curve. The browser clamps the effective radius to whatever fits, so the visual result is identical to a much smaller number in practice. CSS does accept percentages beyond 100 because browsers resolve overlapping curves, but very large values often look identical after normalization. Treating this as a quirk to design around, not a bug to fix, is the safe approach: request realistic numbers, inspect the preview, and check the result on the actual component at the size it will ship.
Practical starting values for common components
A generator helps more when the output is grounded in patterns that already work in real interfaces. The table below lists common component types alongside a sensible starting value and the reasoning behind it.
| Component | Suggested unit | Suggested range | Why |
|---|---|---|---|
| Card | px | 12 to 24 | Subtle curve keeps edges readable without dominating content. |
| Input field | px | 6 to 10 | Matches typical form-control radii and stays consistent with neighbors. |
| Primary button | px or % | 8 to 12, or 9999 / 50% | Large value creates a pill, mid value creates a soft rectangle. |
| Avatar (square) | % | 50% | Half of each dimension produces a circle on any square crop. |
| Organic panel | % | 10 to 30, varied | Asymmetric corners break the rigid rectangle without losing shape. |
The percentage values are useful when the component should appear to scale with the box, especially for avatars and pills. For a uniform card, start with 12px to 24px. For a pill, use a large pixel radius or 50% and confirm that the element has enough horizontal padding. For an organic panel, vary all four percentages.
After copying the declaration
The copied border-radius is a starting point, not a finished rule. Test it with the element's real width, height, border, padding, focus outline, and responsive breakpoints before shipping. Rounded corners are decorative, but they affect backgrounds, borders, and overflow clipping, so a very large radius may visibly reduce the clickable corner area. Buttons and controls should still meet appropriate touch-target sizes regardless of how round they appear, and content can visually crowd a curve when the padding is too small.
Do not rely on rounded shape or color alone to communicate meaning: ensure that focus rings, contrast, and labeling already carry the affordance before the curve is added. Accessibility checks like keyboard focus order, overflow, and contrast should still be verified even when the curve looks right in the preview pane.
All of the values described here are processed locally in the browser. The tool runs entirely on the client, so no design values are uploaded or stored, no account is required, and no new dependency is loaded. Use the preview to explore, copy the CSS once the curve looks right, and verify it in the actual component on real content before considering the work done.
If you're weighing options, How to Make a CSS Button Responsive at Every Width covers this in detail.