🔒 Runs in your browser — nothing is uploaded✓ Free, no signup
CSS Border Radius Generator
Set rounded corners for all sides or each corner separately in px, % or rem — or switch to blob mode for organic shapes using the 8-value border-radius syntax.
CSS
border-radius: 24px;
Shape
Preview size
When should you use the Border Radius Generator?
- Rounding buttons, cards and images
- Making pill buttons and circular avatars
- Creating organic blob shapes for hero sections
How to use the Border Radius Generator
- 1
Choose a mode
Corners for normal rounding, Blob for organic shapes.
- 2
Set the radius
Use one value for all corners or untick it to set each corner.
- 3
Pick a unit
px for fixed sizes, % to scale with the element (50% makes a circle).
- 4
Copy
Copy the shortest valid border-radius value.
Examples
Different top and bottom corners
Corners
Top left 24 · Top right 24 · Bottom right 4 · Bottom left 4 (px)
CSS
border-radius: 24px 24px 4px 4px;
Common errors and how to fix them
My circle is an oval- border-radius: 50% only makes a circle when width and height are equal.
Large px values don't round more- Once the radius reaches half the element's size, corners can't get any rounder.
More from Design & Color
Free tools that run in your browser — no signup, nothing uploaded.
Color Picker & Converter
Pick a color and convert between HEX, RGB and HSL instantly.
Color Palette Generator
Generate harmonious color palettes and export them as CSS, Tailwind or JSON.
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
PX to REM Converter
Convert pixels to rem and rem to pixels for any root font size.
CSS Box Shadow Generator
Design layered CSS box shadows visually and copy the CSS or Tailwind class.
Glassmorphism CSS Generator
Create frosted-glass UI cards with backdrop blur and copy the CSS.
CSS Clamp() Fluid Size Calculator
Generate clamp() values for fluid typography and spacing between two screen sizes.
CSS Text Shadow Generator
Build CSS text shadows — soft, neon, outline or retro — and copy the code.
JSON Auto-Fixer & Formatter
Repair, validate, and beautify broken JSON (missing quotes, trailing commas).
Border Radius Generator FAQ
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left.
Set border-radius: 50% on an element with equal width and height.
Use a very large radius, such as 9999px. The corners can't exceed half the height, so the ends become perfect semicircles.
Values before the slash are horizontal radii and values after are vertical radii, which allows elliptical corners and organic blob shapes.
Yes — it's animatable with CSS transitions and keyframes, which is a popular way to make morphing blobs.
No. Everything runs in your browser, so your data never leaves your device.