Skip to content
Toolars
Explore
Report bug

Design · Local utility

CSS Border Radius Generator

Shape four corners independently in pixels or percent, linked or unlinked, and copy the explicit four-value border-radius declaration.

Task path / input to outcome

Choose the unit

Runs locally · Nothing is uploaded

How CSS Border Radius Generator works, privacy, and related tools

Task path / input to outcome

How to shape a CSS border radius

  1. 01

    Choose the unit

    Set Unit to Pixels or Percent — the workspace starts in Pixels. Pixels stay constant at any element size; percent values scale with the element, which is what makes organic, asymmetric shapes possible.

  2. 02

    Adjust the four corners

    Move Top left, Top right, Bottom right, and Bottom left — each from 0 to 100 in the chosen unit, in steps of 1. All four start at 24 px, and the preview card redraws with every change.

  3. 03

    Link or unlink the corners

    Keep Link all corners on to change every corner at once, or turn it off to shape each corner independently. The workspace states it next to the toggle: changing one corner updates all four while linked.

  4. 04

    Try the sample shape

    Press Load sample for an asymmetric reference: Top left and Bottom right at 64 px, Top right and Bottom left at 12 px, unlinked — the diagonal leaf shape used on cards and avatars. Reset returns to the uniform 24 px default.

  5. 05

    Check the generated declaration

    The output always lists four values in clockwise order — top-left, top-right, bottom-right, bottom-left — so every corner stays explicit when you paste it. The status badge reads VALID CSS, and any out-of-range corner flips it to CHECK VALUES and blocks copying.

  6. 06

    Copy or download the CSS

    Press Copy CSS to copy the .rounded-card rule as a four-value border-radius declaration, or Download .css to save it as toolars-border-radius.css. The same declaration works on images, buttons, cards, and any other element.

Tool facts

Processing
In your browser
Input leaves this device
Never
Retention
Nothing is stored
Price
Free

Your input stays in the browser.

CSS Border Radius Generator uses its verified local execution path and does not create a hidden input or output history.

Local execution

Runs inside the current browser tab.

No hidden processing

Active tool data never becomes a Toolars document record.

No account required

Use the core workflow without creating a profile. Favorites sync to your account after you sign in.

Immediate reset

Clear the tab and the active working data is gone.

What CSS Border Radius Generator actually does

Rounded corners set the tone of an interface: 8 px for a quiet form, 24 px for a friendly card, wildly asymmetric values for the organic blob behind a hero section. Guessing four numbers in a stylesheet is slow, especially in percent, where the curve depends on the element's proportions. CSS Border Radius Generator shows the exact shape as you drag, with the corners linked for uniform rounding or unlinked for leaf and blob shapes. It then hands you the declaration — rendered and validated locally.

Common questions

What is the difference between Pixels and Percent?
Pixels give every corner a fixed radius regardless of element size. Percent resolves against the element's dimensions, so the same value produces a different curve on a tall card than on a wide one — that relativity is exactly what enables ellipse and blob shapes.
What does Link all corners do?
While linked, changing any corner updates all four to the same value, which keeps uniform rounding quick. Turn the toggle off to control Top left, Top right, Bottom right, and Bottom left independently — the asymmetric sample preset is built that way.
How do I get a perfect circle or ellipse?
Switch Unit to Percent and set all four corners to 50: on a square element the result is a perfect circle, and on a rectangular one an ellipse. That is the standard avatar and pill technique, and the preview shows it before you copy anything.
Why does the output always list four values?
CSS would let identical values collapse into shorthand, but the generator writes all four corners in clockwise order so the declaration mirrors the four controls exactly. What you tuned is what you paste, with no ambiguity about which corner each number shapes.
What are the limits?
Each corner accepts 0 to 100 in the selected unit, in steps of 1. Out-of-range values are highlighted with CHECK VALUES, and copying or downloading is blocked until they are fixed.
Is anything uploaded or stored?
No. The preview and the generated CSS are computed inside this browser tab, and no generated value enters storage, logs, analytics, or the network.

Continue in Design

Related tasks, not a dead end.

Move into another focused workspace without returning to the full index.

CSS Loader Generator

Design an orbit-ring or three-dots loading spinner with size, stroke, speed, and color controls, and copy CSS that respects reduced motion.

Create

CSS Checkbox Generator

Style a custom checkbox with size, border, and state colors, and copy CSS that keeps a real, keyboard-accessible input underneath.

Create

CSS Switch Generator

Design a pure-CSS toggle switch with track, thumb, and two-state colors, and copy code with focus and reduced-motion handling included.

Create

CSS Clip Path Generator

Edit polygon points by dragging, keyboard or coordinates. Start with four presets and copy a clip-path declaration or full CSS, locally.

Create