The Border Radius Generator is a visual tool for creating custom CSS border-radius values. Drag sliders to control each corner independently, preview the shape in real time, and copy the CSS — from simple rounded corners to complex organic shapes. No more guessing at percentage values to get the perfect curve.
Step-by-Step
Adjust corner values — Use the four sliders to set the border radius for each corner: top-left, top-right, bottom-right, and bottom-left.
Enable advanced mode — Toggle advanced mode to control horizontal and vertical radii independently for each corner, creating elliptical curves.
Preview the shape — The live preview box updates instantly as you drag sliders, showing the exact shape your CSS will produce.
Try presets — Click preset buttons for common shapes: circle, pill/capsule, rounded rectangle, leaf, egg, and other organic forms.
Copy the CSS — Click the copy button to grab the complete border-radius declaration for your stylesheet.
Features
Independent Corner Control — Set different radius values for each of the four corners to create asymmetric shapes.
Elliptical Radii — Advanced mode lets you set horizontal and vertical radii separately for each corner, using the / syntax (e.g., 10px 20px 30px 40px / 50px 60px 70px 80px).
Live Preview — See the border radius applied to a customizable preview box in real time, with adjustable box size and background color.
Unit Support — Switch between pixels (px), percentages (%), em, and rem units for precise control in different contexts.
Shape Presets — Quick buttons for common shapes: perfect circle (50%), pill shape (9999px), rounded card (8px), and creative organic forms like blobs.
Shorthand Optimization — The tool generates the shortest possible CSS shorthand, collapsing identical values and using the most concise syntax.
Common Use Cases
UI Components — Design rounded buttons, cards, badges, and avatar containers with precise corner curves that match your design system.
Creative Shapes — Create organic blob shapes, speech bubbles, and decorative elements using complex border-radius combinations.
Brand Elements — Build unique, branded shapes for logo containers, feature icons, and marketing elements.
Button Styles — Generate pill-shaped buttons with border-radius: 9999px or subtly rounded buttons with consistent corner values.
Image Frames — Create rounded or shaped image containers that clip photos into circles, rounded rectangles, or custom shapes.
Why Use This Tool
The CSS border-radius shorthand with eight values is one of the most confusing properties to write by hand. The / syntax for elliptical corners is especially hard to visualize. This generator makes it intuitive — just drag sliders and see the shape. It's perfect for designers who want precise control over border curves and developers who need to quickly prototype UI components with custom corner shapes. All code generation happens in your browser instantly.