CSS border-radius Property

border-radius is used to create rounded corners on elements. The values can be specified in length or percentage units.

border-radius is a shorthand for border-top-left-radius, border-top-right-radius, border-bottom-left-radius and border-bottom-right-radius and values get applied the same way as values for padding & margin get applied (clockwise from the top left to the bottom right):

/* All corners equal */
.rounded-box {
  border-radius: 25px;
}

/* 40% for top left
   + bottom right corners */
.rounded-box2 {
  border-radius: 40% 0;
}
.rounded-box
.rounded-box2

Use a border-radius of 50% on square elements to create a circle:

.round-box {
  border-radius: 50%;
}
.round-box

A lesser known fact is that for each border-radius value you can use / to define different horizontal and vertical radii (fun word 🤓). By default the horizontal and vertical radii have the same value. The value(s) before the / is for the horizontal radius and the value(s) after the / is for the vertical radius. You probably won’t need to use this often, but here’s an example anyway:

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

/* 10px horizontal radius all around,
   but distinct vertical radii */
.radii-fun2 {
  border-radius: 10px / 3px 15px 25px 45px;
}
.radii-fun
.radii-fun2

Browser Support

Can I Use border-radius? Data on support for the border-radius feature across the major browsers from caniuse.com.

Search

🔎 Searching...