Buttons
Make pill-shaped or softly rounded buttons.
CSS Border Radius Generator
Round the corners visually and copy the code.
Your files stay with you. Your files never leave your browser. This tool runs on your device: nothing is uploaded to our servers, so there is nothing for us to store or see.
How to use it
- Move a slider, or turn off linking to set each corner separately.
- Choose pixels or percent, or try a preset.
- Copy the CSS.
Where it helps
Avatars
Turn square profile photos into circles.
Cards
Give cards and images consistent rounded corners.
Good to know
Stays in your browser
Everything is worked out on your device and never sent to our servers.
Keep one radius
Use the same few values across a site for a tidy look.
Circles need squares
50% makes a circle only on a square box.
Questions people ask
How do you round the corners of a box in CSS?
Move the slider to round all four corners together, or turn off linking to set the top left, top right, bottom right and bottom left separately. Choose pixels or percent, or start from a preset: Square, Rounded, Pill, Circle, Leaf or Tab. The preview updates as you go, and you copy the border-radius line in its shortest form.
- 4 Corners. Linked or separate.
- px Or %. Fixed or scaling.
- 6 Presets. Pill, Circle, Tab.
- Shortest CSS. e.g. 8px 4px.
How do I make a circle or a pill?
For a circle, use 50% on a square box, such as a 96 by 96 pixel avatar. For a pill-shaped button, use a large pixel radius such as 999px; the browser limits it to half the height, so the ends are perfectly round whatever the button's width. The Circle and Pill presets set these for you.
In which order are the four values?
Top left, top right, bottom right, bottom left, going clockwise from the top left. The tool writes the shortest form, for example 8px 4px when opposite corners match, or a single value when all four are the same. That keeps your stylesheet short and easy to read.
Pixels or percent?
Pixels give the same corner size on any box, so a 12px radius looks the same on a small button and a large card. Percent scales with the box, so the corners stay in proportion, but on a wide rectangle percentages make oval corners. Pixels are the usual choice for interface elements.
Does it support elliptical corners?
Not in this version; each corner is a circular arc. CSS allows elliptical corners with a slash, such as 50% / 30%, and you can add that by hand to the copied code. Most designs only need circular corners, which is what the sliders create. Test the shape in the browser.
What is the Leaf preset?
Leaf rounds two opposite corners strongly and leaves the other two square, giving a leaf-like shape. It's a decorative style for image frames, badges or speech-bubble-like boxes. Adjust the corners after choosing it to make the shape softer or sharper. It works best on square or nearly square boxes, such as images and badges.
How do I round only the top corners?
Turn off linking and set the top left and top right sliders, leaving the bottom two at zero. That's common for card images that sit at the top of a rounded card, or tabs; the Tab preset starts you there. The tool writes something like 16px 16px 0 0 for you.
Why are my image's corners not rounded?
If the image sits inside a rounded box, the image itself may still have square corners poking out. Add overflow: hidden to the box, or apply the same border-radius to the image. For a circular avatar, apply 50% directly to a square image. Check the parent box too.
Which radius looks most modern?
There's no single answer, but many current designs use 8 to 16 pixels for cards and buttons and fully round pills for tags and chips. Pick a small set of values, such as 6, 12 and 999 pixels, and use them consistently across the whole site.
Does border-radius affect borders and shadows?
Yes. Borders, backgrounds and box shadows all follow the rounded corners. That's why a rounded card with a shadow looks clean in every browser. Outlines on focused elements also follow the radius in current browsers, which helps keyboard users. No extra code is needed for any of them to follow the curve.
Can I use it for email templates?
Most modern email apps support border-radius, but some versions of Outlook on Windows show square corners. Design so the email still looks fine with square corners there. Rounded buttons are the most common use and degrade gracefully. Test the email in Gmail and Outlook before sending it to your full list.
Does it work with images and videos?
Yes. border-radius works on img and video elements directly. For a rounded thumbnail, apply the radius to the image itself. For an iframe, such as an embedded video, wrap it in a box with the radius and overflow: hidden for the most reliable result. Test on mobile.
Can I download the CSS?
Yes. Copy the border-radius line to the clipboard or download it as border-radius.css. The line is ready to paste into any CSS rule. Combine it with the box shadow and gradient generators to style a complete card or button in a few minutes. Nothing else is needed.
Is anything uploaded?
No. The shape is built and previewed in your browser, and nothing is sent to our servers or stored. Copy the CSS before closing the tab. You can design as many shapes as you like without signing up, and there's no limit on how often you use it.
Does it work on a phone?
Yes. Drag the sliders or tap a preset and copy the CSS. Fine adjustments are easier with a mouse, but the preview works well on a phone, and it's useful for checking how rounded buttons feel on a small touch screen, where most visitors will see them.
Is the border radius generator free?
Yes. It's free with no sign-up and no limit on use. It's one of the free developer tools from Marketiism, along with the box shadow and gradient generators and the CSS minifier. Marketiism builds software for small businesses in India. Use it as often as you need.
Want this inside your own account?
Marketiism keeps your invoice numbers, GST reports, UPI payment links and WhatsApp reminders in one place. Leave your details and we'll call to set it up for your business, or start the trial yourself.
More Developer tools
CSS Box Shadow Generator
Design layered box shadows with sliders and copy the CSS.
CSS Gradient Generator
Design linear, radial and conic gradients and copy the CSS.
CSS Minifier and Beautifier
Minify CSS for faster pages, or beautify it with clean indentation.
JSON Formatter
Format, validate and minify JSON, and see exactly which line has a mistake.
JSON to CSV
Turn a JSON list of records into CSV for Excel or Google Sheets.
CSV to JSON
Convert CSV rows into a JSON list, with numbers and true/false detected.