CSS Border Radius Generator

It generates the CSS border-radius shorthand property. If all corners are equal, it outputs a single value. If corners differ, it outputs four space-separated values in order: top-left, top-right, bottom-right, bottom-left.

The slider uses pixel values (0�100px), which covers most use cases. For percentage-based border-radius (like 50% for circles), you can manually edit the generated CSS after copying it. The output is standard CSS you can modify further.

border-radius sets four corners: top-left, top-right, bottom-right, bottom-left. Using two values per corner (e.g., 20px/10px) creates elliptical curves instead of circular ones. The shorthand order follows the clockwise pattern starting from top-left.

For a circle: set equal width and height, then border-radius: 50%. For a pill (capsule) shape: set border-radius to at least half the element's height (e.g., border-radius: 999px works for any height). These are very common patterns in modern UI design.

Percentage values are calculated based on the element's dimensions — 50% creates an ellipse that fills the element. Pixel values create consistent rounding regardless of element size. Use px for consistent corner rounding, % for shapes that adapt to container size.

Yes! border-radius is fully animatable with CSS transitions and keyframe animations. This enables morphing shapes, expanding buttons, and interactive hover effects. Combined with other animatable properties (width, height, background), you can create rich shape-shifting animations.

The "All" slider sets all four corners to the same value simultaneously. After using it, you can fine-tune individual corners with their separate sliders. It's a fast way to get a uniform border-radius quickly.