UCSSR
CSS Reference

CSS border-radius

Complete guide to the CSS border-radius property — syntax, values, per-corner control, elliptical corners, and browser support.

Overview

The `border-radius` property rounds the corners of an element's outer border edge. It is a shorthand for `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, and `border-bottom-left-radius`. Introduced in CSS3, it is now universally supported and fundamental to modern web design.

Syntax

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

Values

0
No rounding (square corners). This is the default value.
<length>
Fixed radius in px, em, rem, etc. Example: `border-radius: 8px`.
<percentage>
Radius relative to the element's dimensions. 50% on a square = circle.
Two values
`border-radius: 10px 20px` — sets top-left/bottom-right and top-right/bottom-left.
Four values
`border-radius: 10px 20px 30px 40px` — each corner individually (TL, TR, BR, BL).
/ separator
`border-radius: 50% / 25%` — sets horizontal / vertical radii for elliptical corners.

Browser Support

Supported in all modern browsers. No vendor prefix needed since IE9+.

Try it visually

Use our visual border-radius generator to create and preview CSS code in real-time.

Open CSS border-radius Tool

Frequently Asked Questions

Set `border-radius: 50%` on a square element (equal width and height). The radius rounds each corner by half the dimension, creating a perfect circle.

Pixel values create fixed-size rounding. Percentage values are relative to the element's dimensions — they scale as the element resizes. Use % for responsive designs.

Yes. Use individual properties like `border-top-left-radius: 20px` or the shorthand with four values where only one is non-zero.