CSS Border Radius Generator
Create custom rounded corners with a visual editor and copy the CSS instantly
Top Left
px
Top Right
px
Bottom Right
px
Bottom Left
px
border-radius: 16px;
Understanding Border Radius
Single Value | Apply the same radius to all four corners for uniform rounded corners. Link all corners together for quick adjustments.
Individual Corners | Control each corner independently to create unique shapes like speech bubbles, tabs, tickets, and organic blob shapes.
Units | Choose between px for fixed sizes, % for responsive shapes, or rem/em for scalable designs that adapt to font size.
How to Use
Preset Shapes | Start with a preset shape like Pill, Leaf, or Drop and fine-tune the values to match your design.
Instant Export | Copy the generated CSS code with one click. The live preview updates in real-time as you adjust the border-radius parameters.