CSS border-radius Property

A border-radius adds rounded corners to an element.

The border-radius can have one to four values, one for each corner.

Example

#

An element with a border-radius.

An element with a 50px border radius.
<style>
  .border-round {
    padding: 25px;
    border: 2px solid #302ea3;
    border-radius: 50px;
  }
</style>

<div class="border-round">
  An element with a 50px border radius.
</div>

Syntax

border-radius: 1-4 length | % / 1-4 length | % | initial | inherit;

Values

#

Value Description
length Shape of the corner, default value is 0.
% Shape of the corner in percentage
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-radius values.

border-radius: 15%
<style>
  .border-radius-example {
    padding: 20px;
    border: 2px solid #302ea3;
    border-radius: 15%;
  }
</style>

<div class="border-radius-example">
  border-radius: 15%
</div>

This example has a different border radius for each of the four corners.

Each corner has its own border-radius value.
<style>
  .border-radius-4 {
    padding: 20px;
    border: 2px solid #302ea3;
    border-radius: 5px 10px 30px 50px;
  }
</style>

<div class="border-radius-4">
  Each corner has its own border-radius value.
</div>

A border radius with 3 values. The middle value is used for top-right and bottom-left corners.

Three border-radius values.
<style>
  .border-radius-3 {
    padding: 20px;
    border: 2px solid #302ea3;
    border-radius: 5px 10px 50px;
  }
</style>

<div class="border-radius-3">
  Three border-radius values.
</div>

Border radius with two values.

Two border-radius values
<style>
  .border-radius-2 {
    padding: 20px;
    border: 2px solid #302ea3;
    border-radius: 2px 30px;
  }
</style>

<div class="border-radius-2">
  Two border-radius values
</div>

An image with rounded corners.

<div>
  <img style="border-radius: 30px;"
       src="/img/css/cardplayers.jpg" />
</div>

An image as an elliptical shape.

<div>
  <img style="border-radius: 50%;" 
       src="/img/css/cardplayers.jpg" />
</div>

Browser support

This table shows when border-radius support started for each browser.

Chrome
5.0 May 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
10.5 Jun 2010
Safari
5.0 Jun 2010

You may also like

Guides