CSS Border Radius Generator
Round corners and craft organic blob shapes in CSS.
Round each corner independently or switch to blob mode for organic, asymmetric shapes using the elliptical border-radius syntax. Live preview, px / % / em units and a one-click randomiser, then copy ready-to-paste CSS. Runs fully in your browser — nothing is uploaded.
How to use CSS Border Radius Generator
Choose a mode
Start this free online CSS border-radius generator in Simple mode for clean rounded corners, or switch to Blob mode for organic, asymmetric shapes.
Round the corners
In Simple mode, keep the corners linked to round all four equally, or unlink to drag each corner slider independently for a custom rounded-corner design.
Pick a unit
Select px, %, em or rem to control how the border-radius scales, with 50% turning a square into a circle and px giving fixed, predictable rounding.
Shape a blob
Switch to Blob mode and adjust the horizontal and vertical radii, or hit Randomize, to bend the box into a smooth organic blob using the elliptical slash syntax.
Preview live
Watch the preview box update instantly as you tweak values and resize it, so what you see on screen is exactly the CSS border-radius you will ship.
Copy the CSS
Click Copy CSS to grab the shortest border-radius shorthand, then paste the ready-made rule straight into your stylesheet for any project.
Frequently asked questions
How do I round the corners of an element?
Add border-radius to the element in CSS. In Simple mode here, keep the corners linked and drag a single slider to round all four corners equally — then copy the generated rule, e.g. border-radius: 16px;.
How do I make each corner different?
Turn off the “Link all corners” lock, then set each slider (top-left, top-right, bottom-right, bottom-left) on its own. The output expands to the four-value shorthand, e.g. border-radius: 10px 20px 10px 20px; in clockwise order starting from the top-left.
What does the “/” slash syntax do and how do blobs work?
The slash splits border-radius into horizontal and vertical radii: the values before it set each corner’s horizontal curve and the values after set its vertical curve. When those differ, the corner stretches into an ellipse instead of a quarter-circle. Mixing eight such values bends the box into a smooth, organic “blob”. Blob mode builds that string for you and lets you randomize it.
Should I use % or px?
Use px for a fixed, predictable rounding that stays the same at any element size. Use % to make the radius scale with the box — 50% on a square turns it into a circle, and percentages are what power the elliptical blob shapes. em and rem scale the radius relative to font size.
How do I make a circle or a pill shape?
For a perfect circle, give a square element border-radius: 50% (set the unit to % and all corners to 50). For a pill or capsule button, switch the unit to % and set all corners to 50 on a wider-than-tall element so the short sides become fully rounded.
Is anything uploaded?
No. The CSS is generated entirely in your browser. Nothing you create is sent to or stored on a server, so it’s safe to use for any project.
Related tools — Design · CSS generators
- CSS Box Shadow Generator — Design layered CSS box-shadows with a live preview.
- Glassmorphism & Neumorphism Generator — Generate frosted-glass and soft-UI CSS effects.
- CSS clamp() / Fluid Typography Generator — Build responsive clamp() sizes that scale without media queries.
- CSS Flexbox / Grid Playground Generator — Visually build Flexbox & CSS Grid layouts and copy the code.
- Mesh Gradient Generator — Create trendy multi-colour mesh backgrounds as pure CSS.
- Cubic-Bezier Easing Generator — Shape CSS easing curves by dragging handles, with a live preview.
- Blob & Wave SVG Generator — Generate organic blob shapes & hero-section waves as SVG.