Border Radius Generator
Build a CSS border-radius, with independent corners.
Calculated locally in your browser.
- Link all four corners for a uniform radius, or unlink to set each one.
- Live preview of the shape as you change values.
- Copies a ready-to-paste `border-radius` declaration.
Why this is private
- Calculated locally in your browser.
- Open your browser's DevTools → Network tab while using this tool — you won't see a request carrying your input, because it never leaves your device.
- Nothing you enter is uploaded to a server or shared with us — the processing happens entirely on your device.
Overview
Builds a CSS border-radius value visually, with each corner adjustable independently or linked together, and a live preview.
How to use it
- 1Adjust each corner, or link them to move together.
- 2Copy the generated border-radius CSS.
Tips
- For a perfect circle, use a radius of at least half the element's size on a square element (or 50%). This tool outputs pixel values — swap in `%` by hand if you need it responsive.
Frequently asked questions
What people use it for
Round a card, button or imageSet one value with corners linked and paste it in.
Make a pill or fully-round shapeUse a large radius (or 9999px) for pill buttons and avatars.
Create an asymmetric shapeUnlink corners for a speech-bubble or tab-style outline.
Match a design specEnter the exact per-corner radii from a mockup.
Related tools
All design toolsShadow GeneratorBuild a CSS box-shadow with live preview.CSS Gradient GeneratorBuild a linear or radial CSS gradient from multiple colors, with a live preview and one-click copy.Glassmorphism GeneratorBuild a frosted-glass CSS panel visually — tint, blur and border, with a live preview.Color PickerPick a color from anywhere on your screen, or enter one manually — HEX, RGB, HSL, CMYK, OKLCH.
Ready to use Border Radius Generator?
Border Radius Generator