---
url: https://findutils.com/guides/border-radius-generator-guide
title: "How to Use CSS Border Radius Properly"
description: "Round corners with border-radius, from one value to four. Read the shorthand order, why a huge value makes a pill, and how percentages differ from pixels."
category: design
content_type: guide
guide_type: subtopic
cluster: design
locale: en
read_time: 6
status: published
author: "olgunozoktas"
published_at: 2026-09-16T23:10:00Z
og_image: "/images/content/guides/border-radius-generator-guide-cover-20260916.webp"
image_alt: "Four blank ceramic tiles in a row on an oak table, each with visibly rounder corners than the one before it, until the last is almost a circle."
updated_at: "2026-09-16T23:10:00Z"
excerpt: "The shorthand runs clockwise from the top left, a huge pixel value is how a pill is made, and percentages resolve against the element's own box. Read the rules that cost a reload each."
tag_ids: ["design", "css", "web-development", "ui-design"]
tags: ["Design", "CSS", "Web Development", "UI Design"]
primary_keyword: "css border radius"
secondary_keywords: ["border radius generator", "rounded corners css", "css pill button", "border radius percentage", "tailwind rounded class"]
tool_tag: "border-radius-generator"
related_tool: "border-radius-generator"
related_tools: ["border-radius-generator", "box-shadow-generator", "glassmorphism-generator", "gradient-generator", "cubic-bezier-generator"]
---

`border-radius` looks like the simplest property in CSS until you need four different corners, a pill shape, or a circle from a rectangle. FindUtils [CSS Border Radius Generator](/design/border-radius-generator/) previews the shape while you drag and writes the declaration, including the shorthand in the right order.

This guide covers the rules that each cost a reload to learn: the value order, the clamping behaviour, and how percentages differ from pixels.

## What Order Do the Four Values Go In?

Clockwise from the top left: **top-left, top-right, bottom-right, bottom-left.**

```css
/* all four corners */
border-radius: 12px;

/* top-left, top-right, bottom-right, bottom-left */
border-radius: 32px 0 32px 0;
```

Getting the order backwards is the most common mistake with this property, because it does not match the top/right/bottom/left order used by `margin` and `padding` — those start at the top edge, while this starts at a corner.

When all four values are equal the single-value form means exactly the same thing, and it is what you should ship. The generator collapses to it automatically.

## How Do You Make a Pill Button?

Use a pixel radius far larger than the element could ever need, such as `999px`.

Browsers clamp the radius to half the smaller dimension, so an absurd value simply rounds the ends fully — at any height, without you knowing the height. That is why `border-radius: 999px` shows up in production stylesheets: it is not sloppiness, it is the idiom.

The same clamping explains a result people report as a bug: setting `border-radius: 100px` on a 40px-tall button gives a pill rather than something strange, because 100px was reduced to 20px.

## What Is the Difference Between px and %?

A pixel radius is fixed. A percentage resolves against the element's **own width and height**, so it scales with the box — and the two behave very differently on a rectangle.

- `border-radius: 50%` on a **square** gives a circle.
- `border-radius: 50%` on a **rectangle** gives an ellipse, not a circle with flat sides.
- `border-radius: 12px` looks identical whether the element is 40px or 400px tall.

Use pixels for UI components, where you want the same corner regardless of content length. Use percentages for avatars and any shape meant to stay proportional.

## Why Does My Image Ignore the Rounded Corners?

Because `border-radius` rounds the element, not its children.

A rounded card containing a full-bleed image will show the image's square corners poking past the curve. Two fixes:

```css
/* clip the children to the parent's curve */
.card { border-radius: 16px; overflow: hidden; }

/* or round the child itself */
.card img { border-radius: 16px 16px 0 0; }
```

`overflow: hidden` is the usual answer. Round the child directly when only some corners should curve — a header image at the top of a card, for instance.

## What About Tailwind?

Tailwind ships a fixed radius scale, so a class exists only for the values on it: `rounded-sm`, `rounded`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`.

The generator offers a class only on an exact match, and deliberately withholds one otherwise. Suggesting `rounded-lg` for 13px would be quietly wrong. For anything off the scale, use arbitrary syntax — `rounded-[18px]` — rather than rounding your design to the nearest class.

## Is Anything Uploaded?

No. The values live in your browser and the preview is local. The page itself loads advertising and analytics scripts like the rest of the site.

## Common Mistakes

### Mistake 1: Using margin's Value Order

`border-radius` runs corner-first, clockwise from top-left — not top/right/bottom/left.

### Mistake 2: Expecting a Circle From a Rectangle

`50%` gives an ellipse unless the element is square. Make it square first.

### Mistake 3: Forgetting overflow: hidden

A child image will not follow the parent's curve on its own.

### Mistake 4: Rounding a Design to Tailwind's Scale

Use arbitrary syntax for the value you actually want.

### Mistake 5: Reporting Clamping as a Bug

A radius larger than half the element is reduced by the browser. That is specified behaviour, and it is what makes the pill idiom work.

## Tools Used in This Guide

- **[CSS Border Radius Generator](/design/border-radius-generator/)** — Per-corner radii with a live preview
- **[Box Shadow Generator](/design/box-shadow-generator/)** — Elevation for the same component
- **[Glassmorphism Generator](/design/glassmorphism-generator/)** — Rounded frosted panels
- **[Gradient Generator](/design/gradient-generator/)** — Backgrounds for rounded cards
- **[Cubic Bezier Generator](/design/cubic-bezier-generator/)** — Easing when the corner animates

## FAQ

**Q: Is the border radius generator free?**
A: Yes. No signup, no limits, and the CSS is generated in your browser.

**Q: What order are the four values in?**
A: Top-left, top-right, bottom-right, bottom-left — clockwise from the top left corner. It does not follow margin's edge order.

**Q: How do I make a pill-shaped button?**
A: Set a pixel radius much larger than the button's height, such as 999px. The browser clamps it to half the smaller dimension, giving fully round ends at any height.

**Q: Why is 50% not making a circle?**
A: Because the element is not square. A percentage resolves against the element's own width and height, so on a rectangle it produces an ellipse.

**Q: Why does my image have square corners inside a rounded card?**
A: `border-radius` rounds the element, not its children. Add `overflow: hidden` to the card, or round the image itself.

**Q: Do I need vendor prefixes?**
A: No. `border-radius` has been unprefixed in every current browser for well over a decade.

## Next Steps

- Add depth with the [Box Shadow Generator](/design/box-shadow-generator/).
- Building a frosted panel? The [Glassmorphism Generator](/design/glassmorphism-generator/) needs a radius too.
- Animating the corner? Build the curve in the [Cubic Bezier Generator](/design/cubic-bezier-generator/).