border-radius

Rounds the corners of an element.

Initial value: 0
Inherited: No
Animatable: yes, as a length or percentage
Applies to: all elements except tables with border-collapse: collapse
JavaScript: element.style.borderRadius = "12px"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.pill {
  border-radius: 999px;
  padding: 4px 12px;
}

Example HTML

<div class="stage" style="display: flex; align-items: center; gap: 12px;">
  <img class="avatar" src="/collections/covers/vibe-coding.webp" alt="">
  <span class="pill" style="background: #312e81;">Level 7</span>
</div>

Preview

Definition and usage

The border-radius property rounds an element’s corners. It affects the background, border, and shadow, even if the element has no border at all.

One value rounds all corners equally, four set the top-left, top-right, bottom-right, and bottom-left corners in turn. The slash notation, for example 50% / 20%, lets you create elliptical corners.

A value of 50% on a square element makes a circle, and a very large pixel value (e.g. 999px) on a rectangle makes a pill shape, whatever its width.

Syntax

border-radius: <radius> (1-4 values) [ / <radius> (1-4 values) ]?;

Values

0
Sharp, rectangular corners.
12px
<length>
Gently rounded corners.
50%
<percentage>
Makes a circle on a square element.
32px 4px
two values
The top-left and bottom-right corners are strongly rounded, the rest only slightly.
50% / 20%
elliptical corners
Different horizontal and vertical radii.

Value	Type	Description
0		Sharp, rectangular corners.
12px	<length>	Gently rounded corners.
50%	<percentage>	Makes a circle on a square element.
32px 4px	two values	The top-left and bottom-right corners are strongly rounded, the rest only slightly.
50% / 20%	elliptical corners	Different horizontal and vertical radii.

Values in practice

Sharp, rectangular corners.

.demo { border-radius: 0; }

12px

Gently rounded corners.

.demo { border-radius: 12px; }

50%

Makes a circle on a square element.

.demo { border-radius: 50%; }

32px 4px

The top-left and bottom-right corners are strongly rounded, the rest only slightly.

.demo { border-radius: 32px 4px; }

50% / 20%

Different horizontal and vertical radii.

.demo { border-radius: 50% / 20%; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

An image inside a rounded container overflows the corners. Add overflow: hidden to the parent, or round the image itself.
Nested rounded corners look best when the inner radius equals the outer radius minus the gap between them.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course