Border Radius Generator
Create simple or complex CSS border radius shapes visually.
border-radius: 50px 50px 50px 50px;About this tool
The Border Radius Generator creates CSS border-radius values visually. You can adjust each of the four corner radii independently to create everything from simple pill shapes and rounded rectangles to complex asymmetric organic forms. The live preview shows exactly how the shape will appear, and the CSS is generated ready to copy.
CSS border-radius is deceptively powerful. While most developers use it for simple rounded corners, each corner can have two independent radii (horizontal and vertical), allowing for elliptical corners and wave-like shapes. Crafting these values by hand is difficult — this generator makes it approachable with intuitive controls.
Border radius shapes are widely used in modern UI design for cards, buttons, badges, avatars, and decorative blobs. The generator outputs both the shorthand and longhand CSS, so you can understand the underlying syntax and use whichever form fits best in your codebase.