Free CSS Border Radius Generator Online
Round the corners of any box, card or button. Our free CSS border radius generator online lets you set each corner separately, preview the shape live, and copy the border-radius code for your stylesheet — sharp corners, soft curves, pill buttons or playful blobs, all in one place.
Rounded corners make a design feel friendly and modern. Cards with a gentle 12-24 pixel radius look clean, buttons with a large radius look like pills, and a 50% radius turns a square into a perfect circle for avatars. The border-radius property takes up to four values — top-left, top-right, bottom-right and bottom-left, going clockwise — and this tool writes them for you.
Presets
About the Free CSS Border Radius Generator
Border radius is the CSS property that rounds the corners of a box. By default every element on a web page has square corners; border-radius cuts each corner into a curve. One value rounds all four corners the same, two values round the top-left and bottom-right together and the other two together, and four values set each corner on its own — top-left, top-right, bottom-right, bottom-left, going clockwise.
The size of the radius changes the character of a design. A small radius of 4-8 pixels just takes the sharpness off a button. A medium radius of 12-24 pixels is the standard for cards and panels. A very large radius turns a button into a pill and, on a square box, a 50% radius turns it into a perfect circle. Mixing different radii on the four corners — a blob — gives an organic, playful shape that works well for decorative elements.
How to Use the CSS Border Radius Generator
- Set the radius for each corner in pixels, or try a preset like Rounded, Pill or Blob.
- Watch the preview update to see the shape your values make.
- Copy the CSS and paste it into your stylesheet.
Frequently Asked Questions
What is border-radius in CSS?
Border-radius is the CSS property that rounds the corners of an element. It takes one to four values in pixels or percentages. For example, border-radius: 24px 24px 24px 24px; rounds all four corners by 24 pixels, while border-radius: 12px; does the same thing in a shorter form.
How do I make a circle with CSS?
Make a square element and give it a border-radius of 50%. On a 100 by 100 pixel box, border-radius: 50%; turns it into a perfect circle — the standard way to make round avatars and profile pictures. This tool works in pixels, so for a circle use the 50% value directly in your CSS.
How do I make a pill button?
Give the button a radius that is at least half its height. A button 48 pixels tall needs a radius of 24 pixels or more to look like a pill. The Pill preset here sets all four corners to 100 pixels, which makes any normal button fully rounded at the ends.
Can each corner be a different size?
Yes. Border-radius takes four values in clockwise order: top-left, top-right, bottom-right, bottom-left. Set different numbers for each corner in this tool — for example 60, 30, 60 and 30 — and the preview shows the uneven, blob-like shape. It is a simple way to make a design feel less boxy.
Related Tools
Box Shadow Generator · Gradient Generator · Color Picker · Pixel to REM Converter