Skip to content
Toolspire

CSS Tools

CSS Border Radius Generator

CSS Border Radius Generator is part of Toolspire and is ready as soon as this page loads. The order is top-left, top-right, bottom-right, bottom-left. Eight on every corner becomes a single 8px. Mixed corners stay as four lengths.

Runs in this tabFreeNo account

On this page

What you can do here

Shorthand only when it is true

Equal corners use one length. Unequal corners never pretend to be a circle.

The clockwise order

The detail names the order so a 0 on the last box is the bottom-left, not the top-left.

A declaration you can paste

The headline includes the property name and the semicolon.

The sequence

How to use the CSS Border Radius Generator

  1. 1

    Set the corner you want square to 0

    A zero is valid. It is not the same as leaving a corner off the shorthand.

  2. 2

    Match all four if you want one number

    The moment one corner differs, the declaration expands to four lengths.

  3. 3

    Paste into a rule, not into a HTML attribute by accident

    The output is a CSS declaration. It is not a Tailwind class.

Worth knowing

  • CSS Border Radius Generator on Toolspire: four equal corners collapse to border-radius: 8px; rather than repeating the value.
  • Mixed corners stay in CSS order: top-left, top-right, bottom-right, bottom-left.
  • 8, 16, 8, 0 becomes border-radius: 8px 16px 8px 0px;.
  • Each corner must be 0–999. Negatives are rejected. The unit on the declaration is px.

Why equal corners collapse

CSS allows one, two or four lengths. One length is the honest form when every corner is the same, and it is what most stylesheets should keep. Four lengths are required as soon as the corners disagree, and the order is fixed by the specification: top-left, top-right, bottom-right, bottom-left. This generator does not emit elliptical radii (a slash and a second set) and it does not convert px to rem.

FAQ

Questions about CSS Border Radius Generator

Where does CSS Border Radius Generator run?

CSS Border Radius Generator runs in this tab on Toolspire. What you type or drop in is not sent to us and is not stored on a server.

What is the order of the four values?

Top-left, top-right, bottom-right, bottom-left, which is clockwise from the top left.

Why did my 8px become a single value?

Because the other three corners are also 8. The shorthand border-radius: 8px means all four.

Can a corner be zero?

Yes. Zero is a square corner. The sample uses zero on the bottom left.

Does this make a pill or a circle?

Only if you set a radius large enough for the element’s size. The generator does not know the element’s width, so it cannot promise a pill.

Keep going

Related tools

CSS Gradient GeneratorNewCSS Gradient Generator on Toolspire. Build a linear or radial CSS gradient from hex colours, preview it. No account is required.CSS ToolsCSS Clamp CalculatorNewBuild a CSS clamp() for a size that scales between two viewports, with a minimum and a maximum in pixels. The maths stays on your device.CSS ToolsCSS Box Shadow GeneratorNewCSS box-shadow generator: build smooth layered shadows, edit each layer, start from Tailwind or Material presets, and copy CSS, Tailwind or React.CSS ToolsCSS Glassmorphism GeneratorNewCSS Glassmorphism Generator on Toolspire: Glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live.CSS ToolsCSS Neumorphism GeneratorNewCSS Neumorphism Generator on Toolspire: Neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states.CSS ToolsBento Grid GeneratorNewBento Grid Generator on Toolspire: Draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.CSS Tools

Open the full directory

Last updated Report a problem or suggest a feature