What is CSS border-radius?

The CSS border-radius property rounds the corners of an element's outer border edge. You can set a single value for uniform rounding or specify each of the four corners independently.

What units does this tool use?

This tool works in pixels (px). The generated CSS uses px values which you can manually change to rem, em, or % if needed.

What does the shorthand mean?

border-radius follows the pattern: top-left / top-right / bottom-right / bottom-left. When all values are equal, the shorthand collapses to a single value like border-radius: 16px.

Can I make a perfect circle?

Yes — set all corners to 50% on a square element. This tool uses px, so set all corners to half the element's width and height (e.g., 64px on a 128x128 element).

Does this tool work with CSS variables?

The tool outputs plain px values. You can wrap the output in a CSS variable (e.g., --radius-card: 12px 4px 12px 4px;) after copying.

Border Radius Generator

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

Visually set each corner's border radius and instantly copy the ready-to-use CSS property.

Corner Controls

Link all corners

Top Left

Top Right

Bottom Right

Bottom Left

Live Preview

Resize each corner using the sliders on the left.

Generated CSS

border-top-left-radius

12px

border-top-right-radius

12px

border-bottom-right-radius

12px

border-bottom-left-radius

12px

CSS copied!

Summary

Visually set each corner's border radius and instantly copy the ready-to-use CSS property.

How it works

Use the sliders or number inputs to set the radius (in px) for each corner.
Toggle the "Link all corners" switch to apply the same value to all four corners at once.
Watch the preview box update live as you drag the sliders.
The generated CSS appears below the preview — click "Copy CSS" to copy it.
Paste the copied line directly into your stylesheet.

Use cases

Design pill buttons, rounded cards, and circular avatars without trial and error.
Generate asymmetric border-radius values for organic, blob-like shapes.
Quickly prototype UI component styling before coding.
Learn how each corner property maps to the CSS shorthand.
Create rounded container styles for marketing landing pages.
Iterate on card border styles for design systems.

Frequently Asked Questions

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