CSS Border Radius Generator
Create custom border radius values with visual controls. Perfect for rounded corners and shapes.
Preview
Corner Radius
Presets
CSS Code
border-radius: 20px;Design custom CSS border radius values with our visual generator. Control each corner individually or link them together. Includes presets for common shapes.
Border radius is trivial when you want a uniform rounded rectangle, but the property has a second, less-used form that controls each corner's horizontal and vertical radius separately. That's how you get organic blob shapes, asymmetric cards, and the squircle-like curves that iOS uses — but the eight-value syntax (four horizontal radii, slash, four vertical radii) is hard to reason about without a visual editor.
This generator gives you independent handles for every corner, plus a link toggle when you want all four in lockstep. Values are emitted in percent or pixels depending on what you're designing — percent for responsive blobs that reshape with the container, pixels for icon-like fixed shapes. The preview shows the current corner values overlaid on the shape, so you can see exactly what's changing.
People reach for this for pill buttons (50% radius), avatars (50% for circles), tag chips, speech bubbles, blob-shaped illustrations, and squircle app icons. It's also the fastest way to replicate a specific corner style from a design spec that uses non-uniform values.
- 1
Set each corner radius
Drag the handles on each corner, or type exact pixel or percentage values. Link corners to keep them in sync, unlink for custom shapes.
- 2
Preview the shape live
The preview element updates as you adjust values. Toggle between pixel and percent units depending on whether you need fixed or fluid corners.
- 3
Copy the border-radius
Copy the generated declaration — either a single-value shorthand or the full eight-value elliptical form if corners differ horizontally and vertically.
Pill-shaped buttons
Set border-radius: 9999px (or 50%) on a button to get a fully rounded pill regardless of the button's height.
Avatar circles
Make square profile images round with border-radius: 50% on an equal-width-and-height container.
Blob backgrounds
Use asymmetric percentage values (e.g. 30% 70% 70% 30% / 30% 30% 70% 70%) to create organic blob shapes for illustrations or section dividers.
Custom chat bubbles
Round three corners and leave one sharp to produce a classic speech-bubble tail without SVG or background images.
What's the difference between px and % for border-radius?
Pixel values stay constant regardless of element size, good for icons and small controls. Percentages scale with the element's dimensions — 50% on a square gives a circle, 50% on a rectangle gives an ellipse. For pills that stay pill-shaped at any size, use a huge pixel value like 9999px.
How does the slash syntax work?
border-radius: 10px 20px / 30px 40px means horizontal radii first (top-left/top-right/bottom-right/bottom-left), then a slash, then vertical radii in the same order. This lets each corner be elliptical rather than circular, which is what makes blob shapes possible.
Why do my rounded corners look jagged?
The element or its children probably have overflow: visible and a hard-edged background. Either set overflow: hidden on the parent so children clip to the rounded shape, or apply the same radius to the child images or backgrounds.
Can I round only specific corners?
Yes. Use border-radius with up to four values (top-left top-right bottom-right bottom-left) or use the individual longhand properties like border-top-left-radius. Set unwanted corners to 0.
Do border-radius and overflow: hidden affect performance?
Rounded corners alone are cheap. Combining border-radius with overflow: hidden and animating transform on the element can force the browser to composite a rounded mask every frame, which is measurable on older mobile devices. If you hit jank, try will-change: transform or move the animation to a child.