Border Radius Generator

Runs entirely in your browser. Nothing you enter or choose is uploaded.

Border Radius Generator – Free CSS Tool

Use this free border radius generator to round the corners of any box, button, card, or image. Set each corner the way you like, then copy the CSS code and paste it into your project. It runs in your browser, so nothing is uploaded.

What Is Border Radius in CSS?

border-radius is a CSS property that makes the corners of an element round instead of sharp. Without it, every box on a web page has square corners.

A small radius gives a soft look. A big radius gives a pill shape or even a full circle.

Example:

css

.box {
  border-radius: 12px;
}

How to Use the Border Radius Generator

1. Set the radius for each corner: top-left, top-right, bottom-right, and bottom-left.
2. Check the shape and adjust until it looks right.
3. Click to copy the CSS code.
4. Paste it into your CSS file.

It takes less than a minute. No sign-up and no installation needed.

Border Radius Syntax Made Simple

You can write border-radius in a few ways.

One value (all four corners are the same):

css

border-radius: 10px;

Two values (first for top-left and bottom-right, second for top-right and bottom-left):

css

border-radius: 10px 30px;

Four values (top-left, top-right, bottom-right, bottom-left, in clockwise order):

css

border-radius: 10px 20px 30px 40px;

Remember the order by going clockwise, starting from the top-left corner.

Popular Shapes You Can Make

• Rounded button or card: Use a small value like 8px or 12px.
• Circle: Use 50% on a square element.
• Pill shape: Use a very large value like 999px on a wide element.
• Leaf or blob shapes: Give each corner a different value.

Why Use Our Border Radius Generator?

• Free forever: No limits and no hidden charges.
• Control every corner: Round each corner on its own.
• Copy-ready CSS: Copy the code and use it right away.
• 100% private: Everything runs in your browser. Nothing is uploaded.
• Works on all devices: Mobile, tablet, and desktop.

Tips for Better Design

• Use the same radius across your site so the design looks clean and consistent.
• Match the radius of an inner box to its parent box, so the corners look natural together.
• Round images too. If you want to edit a picture first, try our AI Image Editor.
• Keep images small so your pages load fast. Our Image Compressor can help.
• Working with small images inside CSS? You may also like our Base64 Encoder & Decoder.

For more simple guides, visit our blog, or explore all free tools on MeraTool.

Frequently Asked Questions (FAQ)

What is a border radius generator?
A border radius generator is a tool that lets you round the corners of an element and gives you the CSS code to copy.

What does border-radius do in CSS?
It makes the corners of an element round. The bigger the value, the rounder the corner.

How do I make a circle with CSS?
Use border-radius: 50% on an element that has the same width and height.

How do I make a pill-shaped button?
Use a very large radius, such as border-radius: 999px, on a wide button.

Can I round each corner differently?
Yes. Use four values in this order: top-left, top-right, bottom-right, bottom-left. Our tool writes this code for you.

Should I use px or %?
Use px for a fixed corner size, like on buttons and cards. Use % when you want the corner to change with the size of the element, like a circle.

Is this border radius generator free?
Yes. It is completely free, and you do not need an account.

Is my data safe?
Yes. The tool runs entirely in your browser. Nothing you enter is uploaded or stored on our servers.

Does border-radius work in all browsers?
Yes. All modern browsers support it, so you do not need extra prefixes.

Can I use border-radius on images?
Yes. Add border-radius to the image and its corners become round.