What is the CSS border-radius shorthand order?

The shorthand follows a clockwise order starting from the top-left: top-left, top-right, bottom-right, bottom-left. When all four values are equal they collapse to a single value. When pairs match they collapse further — for example "8px 16px" means top-left & bottom-right are 8px while top-right & bottom-left are 16px.

What is the difference between px and % for border-radius?

px values apply a fixed radius regardless of the element's size. % values are relative to the element's dimensions — 50% on a square element produces a perfect circle. Percentage values are especially useful for responsive designs where the element size changes.

How do I make a perfect circle with border-radius?

Set border-radius to 50% on an element that has equal width and height. This tool lets you drag all four sliders to 50 when the % unit is selected to instantly preview that result.

What does the longhand form of border-radius look like?

The longhand uses four individual properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Each takes a length or percentage. The shorthand is equivalent but more concise.

Can I use different units for different corners?

Yes, in raw CSS you can mix units per corner in the longhand form. This generator uses a single unit for all corners for simplicity, which covers the vast majority of real-world use cases.

CSS Border Radius Generator

Name: CSS Border Radius Generator
Availability: InStock
Author: Nham Vu

Drag the sliders to set each corner radius independently, toggle px or %, and copy the ready-to-use CSS border-radius shorthand or longhand declaration.

Corner Settings

Unit

Link all corners

Top-Left

Top-Right

Bottom-Right

Bottom-Left

Live Preview

Generated CSS

Shorthand

border-radius: 8px;

Four individual properties

Summary

Drag the sliders to set each corner radius independently, toggle px or %, and copy the ready-to-use CSS border-radius shorthand or longhand declaration.

How it works

Choose a unit — px for fixed pixel sizes or % for proportional rounding.
Drag each corner slider (Top-Left, Top-Right, Bottom-Right, Bottom-Left) to set the radius.
Enable "Link all corners" to keep all four values in sync while dragging.
Watch the live preview box update its shape in real time.
Click "Copy Shorthand" to copy the compact border-radius declaration.
Expand "Longhand" to see and copy the four individual border-*-radius properties.

Use cases

Generating pill buttons with a high border-radius value on left and right.
Creating asymmetric blob or organic shapes for hero section backgrounds.
Setting consistent rounded card corners across a design system.
Quickly testing what different corner radii look like before writing CSS.
Producing the exact border-radius shorthand needed for CSS-in-JS or Tailwind config.
Learning the difference between shorthand and longhand border-radius syntax.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu