---
title: "CSS Border Radius Generator"
description: "Set each corner radius with a live preview and copy the CSS. Switch between pixels and percentages, link the corners, and get the matching Tailwind class when one exists."
url: https://findutils.com/design/border-radius-generator/
category: design
---

# CSS Border Radius Generator

Set each corner radius with a live preview and copy the CSS. Switch between pixels and percentages, link the corners, and get the matching Tailwind class when one exists.

**Use this tool:** [CSS Border Radius Generator](https://findutils.com/design/border-radius-generator/)

## Programmatic access

- Browser-only: this tool works on a file, the DOM, or a browser API and has no REST or MCP id.

## Why use a border radius generator?

Rounding a corner is one line of CSS and still costs a reload every time you guess. Four corners multiply that: an asymmetric shape needs the values in the right order, and the shorthand order (top-left, top-right, bottom-right, bottom-left) is easy to get wrong. This page previews the shape as you drag, writes the shorthand for you, and collapses to the short form when all four corners agree. It runs entirely in the browser.

## Frequently Asked Questions

### What order do the four values go in?

Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. When all four match, the single-value short form means the same thing, and this page emits it automatically.

### How do I make a perfect circle?

Use 50% on all four corners. On a square element that is a circle; on a rectangle it is an ellipse. If you want a circle from a rectangle, make the element square first.

### How do I make a pill button?

Use a pixel radius far larger than the element can use, such as 999px. Browsers clamp the radius to half the smaller dimension, so the ends round fully at any height without you knowing the height.

### What is the difference between px and %?

A pixel radius is fixed and looks identical whatever the element's size. A percentage resolves against the element's own width and height, so it scales, and the same value reads differently on a square and a wide box.

### Why does my image ignore the rounded corners?

Because border-radius rounds the element, not its children. Add overflow: hidden to the rounded parent, or apply the same radius to the image itself.

### Why is there no Tailwind class for my value?

Tailwind's radius scale is fixed, so only exact matches get a class. For anything else use arbitrary syntax such as rounded-[18px] rather than rounding your design to the nearest class.

### Is the generated CSS production ready?

Yes. border-radius has been supported without a prefix in every current browser for many years, and the output is a plain declaration you can paste into a stylesheet.

### Is anything uploaded?

No. The values live in your browser and no request carries them. Third-party analytics and ads load on the page, as on the rest of the site.

## Related Tools

- [Box Shadow Generator](https://findutils.com/design/box-shadow-generator/)
- [Gradient Generator](https://findutils.com/design/gradient-generator/)
- [Glassmorphism Generator](https://findutils.com/design/glassmorphism-generator/)
- [CSS Animation Generator](https://findutils.com/design/css-animation-generator/)
- [Contrast Checker](https://findutils.com/design/contrast-checker/)
- [Color Converter](https://findutils.com/design/color-converter/)