Designer / CSS
Border Radius Generator
Shape corners visually, switch between linked and custom values, and copy border-radius CSS for cards, buttons, and blobs. Tune corners for interface surfaces, explore organic shapes, and copy ready-to-use border-radius values instantly.
px
Unit
Linked
Corner mode
card
Preview
0
Saved shapes
Status
Loaded starter corner radius
Card surface
Rounded corners change the feel of cards, dialogs, and content modules quickly.
CSS output
border-radius: 18px 18px 18px 18px;
Recent shapes
Shapes you generate and reopen will appear here for quick reuse.
Radius breakdown
Top left
18px
Top right
18px
Bottom right
18px
Bottom left
18px
Saved shapes
Save a radius shape you like and reuse it across buttons, cards, and softer surfaces later.