Border Radius Generator: Free CSS Corner Tool

This border radius generator lets you round each corner of a CSS box with four sliders, watch the shape change in a live preview, and copy the finished declaration. It suits developers and designers who want exact corner values, from a subtle 8px curve to leaf and chat bubble shapes, without typing the CSS by hand.

What Is Border Radius in CSS?

Border radius is the CSS property that rounds the corners of an element's outer edge. Each corner is treated as a quarter circle, and the radius is the size of that circle. A radius of 0 gives a sharp corner, and a larger value gives a rounder one.

The shorthand border-radius accepts up to four values, and they always run clockwise starting at the top left: top left, top right, bottom right, bottom left. So border-radius: 10px 20px 30px 40px gives each corner its own size. A single value applies to all four corners.

Pixels vs. percentages

A pixel radius is a fixed length, so the curve looks the same on a small button and a large card. A percentage is relative to the element's own size: the horizontal part of the curve uses the width and the vertical part uses the height. That is why 50% on a square makes a circle, but 50% on a wide rectangle makes an ellipse.

How to Use the Border Radius Generator

You can build a rounded shape in under a minute. Follow these steps:

1. Pick a starting shape under Presets (Square, Rounded, Pill, Leaf, Tab or Chat Bubble), or skip this and set the values yourself.
2. Drag the Top Left, Top Right, Bottom Right and Bottom Left sliders. Each one runs from 0 to 100, and the current value appears beside it.
3. Tick Use % instead of px if you want the radius to scale with the element's size. Leave it unticked for fixed pixel corners.
4. Change the Background Color to see the shape in your own color. The default is indigo (#6366f1).
5. Check the preview box, then read the line under Generated CSS.
6. Press Copy. The button briefly changes to "Copied!" and you can paste the line straight into your stylesheet.

Worked Example: A Card With a Rounded Top Only

Say you have a 300 by 200 pixel card whose image sits flush against the bottom edge, so only the top corners should curve. Set Top Left to 16, Top Right to 16, Bottom Right to 0 and Bottom Left to 0. The preview shows a box with soft upper corners and square lower ones.

The Generated CSS box shows border-radius: 16px 16px 0px 0px;. Read clockwise, that is 16px on the top left, 16px on the top right, then 0 on the bottom right and bottom left. Paste it into your card's rule and the result matches the preview.

Now tick Use % instead of px with the same sliders. The output becomes 16% 16% 0% 0%. On a 300 by 200 card, 16% means about 48px across but only about 32px down, so the curve turns slightly oval. This is the most common reason a percentage result looks different from the pixel version.

What Do the Presets Produce?

Each preset fills all four sliders at once, so you can use it as a starting point and then fine-tune. The table shows the values they set.

How to Read and Use the Results

The Generated CSS line always lists four values in the clockwise order, even when all four are equal. You can leave it as is, or shorten it yourself: 10px 10px 10px 10px is identical to 10px.

Making a circle

Use a square element, tick Use % instead of px, and click the Pill preset, which sets every corner to 50%. A 200 by 200 box then becomes a circle. On a rectangle you get an ellipse instead, so fix the width and height first.

Making a pill or capsule

A true pill has fully round ends on a wide, short element. The slider tops out at 100, which works for buttons up to 200px tall. For taller elements, copy the output and replace the number with a large value such as 9999px, since the browser caps the curve at the box size.

Rounding only one side

Set the two corners on that side to your radius and the other two to 0. For the top only, use Top Left and Top Right. For the bottom only, use Bottom Right and Bottom Left. The Tab preset already does the top-only version.

Who Is This Tool For?

Front-end developers use it to get corner values by eye instead of editing numbers and refreshing the browser. Designers use it to turn a mockup's corner radius into CSS. Students learning CSS can watch how each of the four values maps to a corner.

Typical jobs include card and modal corners, button shapes, avatar frames, tab headers, tooltip and chat bubble shapes, and decorative leaf-like blocks. If you work in Tailwind, Bootstrap or Figma, the numbers you find here still carry over: set the same radius in the matching utility class or corner-radius field.

Best Practices and Common Mistakes

Small habits prevent most corner problems. Keep these in mind:

• Keep related elements consistent. If cards use 12px, give buttons and inputs a nearby value so the interface feels uniform.
• Match the clockwise order. Mixing up which slider maps to which corner is the top mistake. Check the preview before you copy.
• Round nested boxes correctly. An inner element should have a smaller radius than its parent. A common rule is outer radius minus the padding between them.
• Clip the content too. Rounded corners on a parent do not crop a child image. Add overflow: hidden to the parent or give the image its own radius.
• Give the element a size. An inline element or a box with no height can hide the effect.

If the corners look wrong

Check whether another rule overrides your value later in the stylesheet. Also check the unit. A percentage result on a non-square box is oval by design. If the shape looks pinched, remember that when two neighboring radii add up to more than the side they share, browsers scale all radii down proportionally.

Limits of This Generator

The tool outputs one value per corner, so it cannot create elliptical corners that use the slash syntax, such as 50% / 20%. Sliders stop at 100, and the output is the shorthand only, with no separate corner properties or vendor prefixes. For complex organic blobs, you can edit the copied line by hand, or try the CSS clip path generator for shapes that corners alone cannot make.

What to Do Next

Once your corners are right, add depth with the CSS box shadow generator, since shadows follow the rounded outline. Pick fills with the color palette generator, and confirm text on that fill is readable with the color contrast checker. To animate a corner change, a short transition on border-radius works, and the CSS animation generator can build longer sequences. Tidy the final stylesheet with the code beautifier, and find more utilities in the web developer tools collection.

Use the sliders above to shape your corners, watch the preview update, and copy the CSS when it looks right. It is free and needs no sign-in.