What is CSS border-radius?

CSS border-radius is a property that rounds the corners of an element's outer border edge. You can set it as a single value for all corners, or specify each corner individually.

What is the 8-value border-radius syntax?

The 8-value syntax uses a slash (/) to separate horizontal and vertical radii: border-radius: TL TR BR BL / TL TR BR BL. This lets you create elliptical corners for more complex shapes.

How do I make a circle with border-radius?

Set border-radius to 50% on a square element. If the element is not square, 50% will create an ellipse instead.

What units can I use for border-radius?

You can use px, em, rem, %, vw, vh, and other CSS length units. Percentages are relative to the element's dimensions — horizontal radii use the width, vertical radii use the height.

Free CSS Tool

Visual CSS
Border Radius Generator

Design beautiful rounded corners with an interactive visual editor. Adjust each corner individually, pick from presets, and copy production-ready CSS in one click.

🎨

Visual Editor

See your border-radius changes in real-time on a live preview box.

⚡

Instant Presets

Jump-start with pill, circle, squircle, blob, and more built-in presets.

📋

Copy & Go

One-click copy of production-ready CSS you can drop straight into your code.

16px

Top Left

Top Right

Bottom Right

Bottom Left

border-radius: 16px;

Frequently Asked Questions

Everything you need to know about Border Radius Generator.

Visual CSSBorder Radius Generator

Visual Editor

Instant Presets

Copy & Go

Frequently Asked Questions

Visual CSS
Border Radius Generator