Design

Border Radius Generator

Shape rounded corners with px, rem, or % — one uniform radius or four independent corners. Preview on a sample box, then copy shorthand or longhand CSS. Everything runs locally in your browser.

Ad placement — top banner
Presets
Preview

Preview is 240×120px so percentage radii show elliptical corners. For a circular avatar, use a square box in your layout. 

border-radius: 12px;
Ad placement — mid rectangle

What this border-radius generator does

It builds valid border-radius values with a live preview on a colored sample. You can drive one value for every corner or switch to per-corner mode and set top-left, top-right, bottom-right, and bottom-left independently — matching CSS shorthand order (clockwise from top-left).

Units: px, rem, and %

  • px — absolute control; ideal when matching a design spec.
  • rem — scales with root font size; useful in responsive typography systems.
  • % — each corner’s horizontal radius is a fraction of the element’s width, vertical radius a fraction of its height, so non-square boxes get elliptical arcs.

Presets

Quick sizes map to pixel radii. Pill sets a very large uniform radius (9999px) so short sides fully round. 50% switches to percent mode — on a square element this yields a circle; on a wide bar it does not.

Shorthand vs longhand

Shorthand (border-radius: …) is compact. Longhand expands to border-top-left-radius and siblings — handy when you override one corner in a stylesheet cascade or read diffs more clearly.

Privacy

No network request is made when you move sliders or copy CSS.

How to use this tool

  1. Step 1: Choose a unit and uniform vs per-corner.
  2. Step 2: Adjust sliders or presets while watching the preview.
  3. Step 3: Copy the CSS into your project and adapt selectors to your HTML.

Frequently Asked Questions

Does this tool send data to DroidXP?

No. Sliders and the CSS output run in your browser; copying uses the Clipboard API locally when available.

What is the order of four shorthand values?

Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left — the same order this tool uses in per-corner mode.

How do percentage radii work?

Percentages resolve against the element’s own dimensions, so corners are not necessarily circular on rectangles. That is why the preview is a wide bar: you can see elliptical corners clearly.

Why use 9999px for a pill shape?

The browser caps the radius at half the shorter side. A huge pixel value removes the need to know exact width — common for buttons and chips.

Should I use longhand properties?

Use shorthand for normal cases. Longhand helps when you only override one corner later or when mixing units per corner in complex stylesheets.

Does border-radius clip content?

It rounds the border box; overflowing children may still paint outside unless you set overflow: hidden (or similar) on the same element.

Is this the same as clip-path?

No. border-radius affects the border box’s corner radii. clip-path can define arbitrary shapes and behaves differently for events and shadows.

What about logical properties?

Properties like border-start-start-radius follow writing mode. This tool outputs physical corners for straightforward copy-paste; map to logical properties manually if you support RTL or vertical scripts.

Will older browsers ignore my CSS?

border-radius is widely supported today. Legacy IE needed prefixes; current evergreen browsers use standard syntax without vendor prefixes for basic radii.

Ad placement — sidebar 300×600