border-radius | CSS CSS Properties

Defines the radius of an element's corners, allowing you to create rounded corners or circular shapes.

Quick example

.button {
  border-radius: 8px;
  /* standard rounded corner */
}

.avatar {
  border-radius: 50%;
  /* creates a circle */
}

Initial value

See individual properties

Inherited

Applies to

all elements (UAs not required when collapse)

length-percentage

Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

Safe to use without fallbacks.

12+