Border Radius Generator

Drag corners or type values to design border-radius. Preview the shape live. Presets for pill, circle, blob, and ticket shapes. Copy CSS shorthand or individual properties.

Border Radius Generator

Visually design border-radius values for every corner. Drag sliders, use presets, or type exact values. Copy CSS instantly.

Presets

Top Left

Top Right

Bottom Right

Bottom Left

Box Settings

Color Size: 200px

Corner Values

Link all

Top Left12px

Top Right12px

Bottom Right12px

Bottom Left12px

Shorthand CSS

border-radius: 12px;

Individual Properties

border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;

How to Design Border Radius Shapes

Create rounded corners, pills, and organic blob shapes with The IT Hustle's free Border Radius Generator.

1
Start from a presetTry Rounded, Pill, Circle, Blob, Ticket, Drop, Leaf, or Message to load a shape instantly, then fine-tune it.
2
Adjust each cornerDrag the slider or type a value for each corner (top-left, top-right, bottom-right, bottom-left), or check 'Link all' to change all four together.
3
Choose your unitSwitch between px for fixed rounding and % for rounding that scales with the element's size.
4
Preview at different sizesResize the preview box and change its color to see how the shape looks on an element like yours.
5
Copy the CSSCopy the border-radius shorthand, or grab the individual corner properties if your stylesheet needs them separately.

Frequently Asked Questions

Use px when you want consistent rounding regardless of element size — like 8px on every card. Use % when the rounding should scale with the element; 50% on a square element produces a perfect circle.

Set the element's width and height equal, then apply border-radius: 50%. The Circle preset does exactly this — it only looks circular when the element is square.

border-radius: a b c d applies values clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. The tool also outputs each corner as an individual property if you prefer explicit rules.

Blobs use asymmetric values on each corner so no two corners match, producing an organic shape. Regenerate variations by nudging individual corner values while watching the live preview.

Border Radius Generator