CSS Border Radius Generator
Per-corner radius and organic blob shapes.
border-radius: 24px;
rounded-[24px]
What is a CSS Border Radius Generator?
A border-radius generator is a visual editor for the border-radius CSS property. At its simplest the property rounds every corner equally — a one-number border-radius: 16px. But the full syntax is richer than most developers remember: you can target each corner independently, and you can use elliptical radii (different horizontal and vertical radii on the same corner) to produce organic blob shapes that are impossible with a single number.
Three modes cover the common use cases. Simple sets one radius for all four corners — the right choice for buttons, cards, and almost every UI element. A rule of thumb: 8–16px for cards and buttons; 4–6px for inputs; 24px+ for hero panels; 9999px for fully rounded pills. Per-corner mode lets you override each of the four corners independently, which is useful for tabs, speech bubbles, and decorative headers. Blob mode exposes the full elliptical syntax where each corner takes two values — its horizontal radius and its vertical radius — producing asymmetric organic shapes that feel hand-drawn. The full syntax: border-radius: h1% h2% h3% h4% / v1% v2% v3% v4%.
Blob shapes are a popular design trend for hero images, team headshots, and playful illustrations. To get a good blob, nudge the four horizontal radii slightly away from 50% and the four vertical radii in the opposite direction — the asymmetry produces visual interest without feeling broken. Our Randomise button generates a fresh blob so you can iterate quickly.
Browser support. All three modes work in every evergreen browser.border-radius has been stable since 2010; elliptical/per-corner syntax has been fully supported for over a decade. No vendor prefixes, no polyfills.
Accessibility and layout. Border radius is purely cosmetic — screen readers ignore it entirely. But extreme radii can clip hit targets for buttons; if a fully-rounded pill button is very tall, clicks near the top/bottom edges outside the visible pill still register. For strict clipping, wrap the element in a container with overflow: hidden.
How to generate border radius CSS
- Pick a mode. Simple for UI, per-corner for creative shapes, blob for organic forms.
- Adjust the sliders and watch the preview update live.
- In blob mode, use Randomise until you find a pleasing shape.
- Copy the CSS or Tailwind arbitrary-value class.
Features
- Three modes: simple, per-corner, organic blob.
- Live preview with custom box colour.
- Randomise button for blob exploration.
- CSS and Tailwind arbitrary-value output.
- Runs in your browser.
Frequently asked questions
- What's the difference between the three modes?
- Simple applies one radius to all corners (the common case). Per-corner lets you set each corner independently. Blob uses elliptical radii (two values per corner) for organic asymmetric shapes.
- How do blob shapes work?
- The full CSS border-radius syntax allows two values per corner — a horizontal radius and a vertical radius. Combining four pairs of mismatched values produces asymmetric rounded shapes that look organic, which is impossible with a single number per corner.
- Can I animate border-radius?
- Yes. CSS interpolates border-radius cleanly, so transitions between two radii (e.g., square-to-pill on hover) animate smoothly and are GPU-accelerated.
- How do I make a perfect circle?
- Set border-radius to 50% on an element with equal width and height, or use 9999px for any rectangle (creates a stadium/pill shape when the element is wider than tall).
- Does clipping work with child elements?
- Not automatically — children can overflow rounded corners. Add overflow: hidden on the parent to clip children to the rounded boundary.