CSS Border Radius Generator creates custom border-radius values for any shape — from simple rounded corners to asymmetric organic shapes. Each corner (top-left, top-right, bottom-right, bottom-left) can have independent horizontal and vertical radii, allowing elliptical shapes. The live preview shows the resulting shape, and the generated CSS is ready to copy. It also supports percentage-based radii for shape-responsive designs.
CSS border-radius shorthand can specify 1, 2, 3, or 4 values for the corners. border-radius: 10px rounds all four corners equally. border-radius: 10px 20px sets top-left/bottom-right and top-right/bottom-left pairs. border-radius: 50% creates a circle (on a square element) or ellipse. The slash notation border-radius: 10px / 20px sets horizontal and vertical radii independently, enabling 'blob' shapes.
Advanced shapes: pill shape (border-radius: 9999px on a wide element), circle (border-radius: 50% on a square), organic blob (each corner has different horizontal and vertical radii). The full 8-value syntax: border-radius: TL-H TR-H BR-H BL-H / TL-V TR-V BR-V BL-V. Organic blob generators use this 8-value notation with animated custom properties for the morphing blob effect popular in modern UI design.
Pill button
Result: border-radius: 9999px — capsule shape on any width element
Card with rounded top only
Result: border-radius: 12px 12px 0 0 — rounded top-left and top-right, square bottom
Organic blob
Result: border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% — asymmetric elliptical corners
What does border-radius: 50% do?
On a square element (equal width and height), border-radius: 50% creates a perfect circle. On a rectangular element, it creates an ellipse. The 50% is calculated independently for width and height — 50% of width for horizontal radius, 50% of height for vertical radius. This is why border-radius: 50% on a div creates a circle when combined with equal width and height, and an ellipse when dimensions differ.
What is the slash notation in border-radius?
The slash separates horizontal radii from vertical radii: border-radius: H-radii / V-radii. Before the slash: horizontal radii for each corner (same order as normal shorthand: TL TR BR BL). After the slash: vertical radii. Example: border-radius: 50px 0 0 50px / 30px 0 0 30px creates left side with elliptical corners (50px wide, 30px tall) and right side square. This enables non-circular rounded corners.
How do I create a circle avatar?
For a circular avatar: border-radius: 50%; width: 80px; height: 80px; overflow: hidden; The overflow: hidden clips the image to the circle shape. For a responsive circle that maintains its aspect ratio regardless of container size: use aspect-ratio: 1; width: 100%; border-radius: 50%; overflow: hidden. This scales correctly without knowing the pixel size.
What is a 'squircle' and can CSS make one?
A squircle is a shape between a square and a circle — it has rounded corners but with a different curve than circular arcs (using a superellipse formula). iOS uses squircles for app icons. Pure CSS cannot create a true squircle (it would require a custom clip-path with complex bezier curves or SVG). A close approximation uses border-radius: 25-30% with specific percentage values, or CSS clip-path with a polygon approximation. SVG or canvas rendering produces an exact squircle.
Does border-radius affect click area and overflow?
border-radius affects visual rendering but NOT the click target (hit area). The hit area remains the rectangular bounding box. To clip the hit area to the rounded shape, set overflow: hidden or use clip-path. border-radius also does not clip child elements by default — set overflow: hidden to clip children to the rounded corners. Absolute/fixed positioned children overflow regardless of the parent's overflow setting.