Skip to main content
Book Consultation →
CSS100% FreeInstant

CSS Border Radius Generator: Rounded Corners Code

This free CSS border radius generator writes the border-radius rule for any set of corners. Round each corner on its own, or pick a preset such as a pill, a circle or a leaf shape.

By Debmedia Technologies LLP · Kolkata, India · Updated

What Is It and When Do You Need It?

The border-radius property rounds the corners of a box. It can be one value for all corners or four values, and the order and units trip people up. This tool makes the rule from four labelled boxes.

Choose a preset or fill in the corners.

How to Use This Tool

  1. Pick a preset or choose Custom.
  2. Enter the four corner values.
  3. Choose a unit.
  4. Press Generate and copy the CSS.

How the Calculation Works

The four values are written clockwise from the top left. If all four are equal the tool writes a single value, and if opposite corners match it writes the shorter two-value form. Presets use values such as 9999px for a pill and 50% for a circle.

Worked Example

Values 12, 12, 12, 12 give border-radius: 12px;. Values 20, 0, 20, 0 give border-radius: 20px 0;. The leaf preset gives border-radius: 0 100% 0 100%;.

Common Uses

  • Buttons, cards and avatars.
  • Pills and tags.
  • Unusual leaf and tab shapes.
  • Rounded images.

Tips and Common Mistakes

  • Use 50% on a square image for a round avatar.
  • Radii larger than half the side are scaled down.
  • Use the shadow generator for depth.

Next, you may need the box shadow generator, text shadow generator, px to rem converter, aspect ratio calculator.

Everything runs in your browser. Nothing you type is uploaded, stored or sent to any outside service.

Frequently Asked Questions

Clockwise from the top left: top left, top right, bottom right, bottom left.
Use a square element and set border-radius to 50%. For an ellipse, use 50% on a rectangle.
Use a very large radius such as 9999px. The browser limits it to half the shortest side.
Yes. Percent depends on the element size, while px and rem do not.

Disclaimer: results are calculated in your browser from the numbers you enter. Check important results before you rely on them for money, health, safety or legal decisions.