Border-Radius Generator
Free border-radius generator: design rounded corners and organic blob shapes with sliders,….
How to use this tool
Set the corners
Drag the sliders for each corner. Turn on elliptical mode for separate horizontal and vertical control.
Preview live
Watch the shape update instantly. Try the presets — Sharp, Soft, Circle or Blob — for a head start.
Copy the CSS
Hit Copy CSS and paste it straight into your stylesheet. That's it.
Frequently asked questions
What does the border-radius CSS property do?
It rounds the corners of any box — buttons, cards, images, inputs. You can round all corners equally or give each corner its own value, in pixels or percentages.
What is the difference between normal and elliptical corners?
Normal corners use one radius per corner (a perfect quarter-circle). Elliptical corners use two values — horizontal and vertical — so corners can be stretched into ovals, which creates organic blob shapes.
Is border-radius supported in all browsers?
Use a current browser with JavaScript enabled. Support for individual file types, graphics features and large files depends on the browser and device; try a smaller file if a task exceeds available memory.
Can I use the output with Tailwind or a framework?
Absolutely — paste the CSS into your stylesheet or a style attribute. If your framework uses utility classes, the values still tell you exactly what radius to apply.
Why percentages instead of pixels?
Percentages scale with the element, so a 50% radius always makes a perfect circle or pill no matter the size. Pixels give you fixed, precise rounding.