Border Radius Generator
Design rounded corners with per-corner control, elliptical radii, and presets. 100% client-side.
Shape
Background
Size240px
Generated CSS
border-radius: 20%;
Uncheck to control each corner independently (including horizontal and vertical radii for elliptical shapes).
0% (sharp)25%50% (circle/pill)75%100%
⚡ Presets
Common
Round
Asymmetric
Blob
📖 border-radius syntax
All corners equal:
border-radius: 16px;Clockwise from top-left:
border-radius: 16px 0 16px 0;Horizontal / vertical:
border-radius: 40% / 60%;Per-corner elliptical:
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;🔒 100% private: All generation happens in your browser. Your shape is never sent to any server.
About Border Radius Generator
The CSS border-radius property rounds the corners of an element. It is one of the most-used properties in modern web design — for buttons, cards, avatars, badges, and decorative shapes. Border-radius supports up to 8 values: 4 for the horizontal radii of each corner (top-left, top-right, bottom-right, bottom-left) and 4 for the vertical radii, allowing elliptical (asymmetric) rounding. Beyond simple "rounded corners", designers use border-radius for pills (9999px), circles (50%), squircle-like shapes (30%–40%), blobs (with different values per corner), and organic leaf shapes. This generator gives you sliders for all 8 values, presets, and live preview.
How It Works
- Choose to link corners (uniform) or unlink them (per-corner control).
- Adjust the horizontal and vertical radii with sliders or numeric input.
- Choose from presets (pill, circle, squircle, blob, leaf).
- Adjust the preview shape and size.
- Copy the generated CSS and paste it into your stylesheet.
✨ Key Features
- ✓Per-corner control (4 corners × 2 radii = 8 values)
- ✓Linked corners mode (uniform radius)
- ✓Elliptical rounding (independent horizontal/vertical)
- ✓30+ curated presets (pill, blob, circle, leaf, squircle)
- ✓Live preview with shape switcher
- ✓Adjustable preview size and background
- ✓Shorthand and longhand CSS output
- ✓Copy CSS with one click
- ✓Random blob generator
- ✓100% client-side — no data sent to any server
🎯 Common Use Cases
- →Designing button corner radius
- →Creating avatar circles (50%)
- →Making pill-shaped tags and badges
- →Adding organic blob shapes to hero sections
- →Designing card corners for a design system
- →Creating squircle-like icons
- →Making leaf or petal shapes
- →Learning CSS border-radius syntax by experimenting
💡 Advanced Tips & Pro Insights
- ▸The shorthand "border-radius: A B C D" sets four corners clockwise starting from top-left. Adding "/" splits horizontal and vertical: "border-radius: A B C D / E F G H".
- ▸For a perfect circle: width and height equal + "border-radius: 50%".
- ▸For a pill: "border-radius: 9999px" (any huge value works).
- ▸Squircle (Apple-style): use "border-radius: 30%–40%" with equal width/height — but real squircles require SVG or "corner-shape: squircle" (not yet widely supported).
- ▸Blob shapes: use 4 different values like "border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%". Randomize the values to get organic blobs.
- ▸Percentage radii scale with element size. Fixed pixel radii stay constant. Percentages are great for responsive shapes.
Frequently Asked Questions
Is this border radius generator free?▾
Yes, this border-radius generator is completely free with no signup, email, or usage limits.
Is my data safe?▾
Yes, 100% safe. All generation happens in your browser. Nothing is uploaded to any server.
What is border-radius?▾
The border-radius CSS property rounds the corners of an element. It accepts 1–8 values for the corners (or 4 horizontal + 4 vertical for elliptical rounding).
How do I make a circle?▾
Set the element to equal width and height, then apply "border-radius: 50%". This produces a perfect circle regardless of size.
How do I make a pill shape?▾
Use "border-radius: 9999px" (or any value larger than half the height). The browser clamps it to the maximum, producing a pill.
What is the "/" syntax in border-radius?▾
The slash separates horizontal and vertical radii. "border-radius: 40% / 60%" means 40% horizontal radius and 60% vertical radius — producing an ellipse. Each corner can have its own pair.
How do I create a blob shape?▾
Use four different values, e.g., "border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%". Experiment with different combinations — this tool's "Random blob" button generates them automatically.
Does border-radius affect the shadow?▾
Yes — box-shadow follows the border-radius. A rounded card has a rounded shadow, a circle has a circular shadow. This is automatic.