⬜

CSS Border Radius Generator

CSS Tools

Create custom border radius shapes visually. Free, private — all processing in your browser.

Link all corners

All corners: 16px

Width: 200px

Height: 200px

Color

border-radius: 16px;

How to use

1. Enter or paste your data in the input area above
2. Adjust settings or options as needed
3. Click the action button or see real-time results
4. Copy the result with the copy button

All processing happens in your browser. Nothing is sent to any server.

About this tool

Create custom border radius shapes with a visual editor. Link all four corners for uniform rounding, or control each corner independently (top-left, top-right, bottom-right, bottom-left) for asymmetric shapes. 12 shape presets provide instant starting points: None, Small (4px), Medium (8px), Large (16px), XL (24px), Full circle, Pill, two organic blob shapes, Leaf, Drop, and Message bubble. Customize the preview element width, height, and background color. The tool generates the CSS border-radius shorthand — either a single value for uniform corners or the four-value shorthand for individual corners. Essential for buttons, cards, avatars, badges, and decorative UI elements.