CSS border-radius Property

The border-radius property is used to make rounded corners for the outer border edge of an element.

This property is a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties which are used for setting the four corners of an element separately. But the border-radius property can be used to define all the four corners at the same time. It can have from one to four values.

If all four values are set, they represent the top-left, top-right, bottom-right and bottom-left borders respectively. If bottom-left is missed, it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is defined, it is used for all four corners equally.

The border-radius property is specified as:

  1. one, two, three, or four length or percentage values. This is used to set a single radius for the corners.
  1. followed optionally by a slash ( / ) and one, two, three, or four length or percentage values. This is used to set an additional radius, so you can have elliptical corners.

The first set of (1-4) values define the horizontal radius for all four corners. An optional second set of values, preceded by a slash, define the vertical radii for all four corners. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally.

Initial Value 0
Applies to All elements. It also applies to ::first-letter.
Inherited No
Animatable Yes. Each of the properties of the shorthand are animatable.
Version CSS3
DOM Syntax object.style.borderRadius = "20px";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      height: 40px;
      width: 50%;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example</h2>
    <div></div>
  </body>
</html>

For the best possible browser support, you should prefix with -moz- for Firefox, and -webkit- for Safari, Chrome, and other browsers.

Current Firefox versions support border-radius property without the -moz- prefix.

See an example with -moz- and -webkit- prefixes, where two different values are defined for the border-radius property: with percent and pixel.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-pixel {
      height: 40px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      }
      .radius-percent {
      width: 120px;
      height: 120px;
      margin-top: 20px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example with -moz- and -webkit-</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>

You can also set the border-radius for an element with background color or background image.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-bg {
      width: 250px;
      height: 200px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      }
      .radius-img {
      width: 250px;
      height: 200px;
      margin-top: 20px;
      background-img: lightgray;
      background: url('/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
      background-position: left top;
      background-repeat: repeat;
      border: 2px solid #1c87c9;
      border-radius: 25px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h2> Border-radius example with background color</h2>
    <div class="radius-bg"></div>
    <h2> Border-radius example with background image</h2>
    <div class="radius-img"></div>
  </body>
</html>

Now let’s see an example full of various boxes with different border-radius values which form the shape of the boxes.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      width: 250px;
      height: 150px;
      border: solid 3px #1c87c9;
      background: #1c87c9;
      }
      .radius_1 {
      border-radius: 25px;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      }
      .radius_2 {
      border-radius: 25% 10%;
      -moz-border-radius:  25% 10%;
      -webkit-border-radius:  25% 10%;
      }
      .radius_3 {
      border-radius: 10% 30% 50% 70%;
      -moz-border-radius: 10% 30% 50% 70%;
      -webkit-border-radius:  10% 30% 50% 70%;
      }
      .radius_4 {
      border-radius: 10% / 50%;
      -moz-border-radius:  10% / 50%;
      -webkit-border-radius: 10% / 50%;
      }
      .radius_5 {
      border-radius: 10px 100px / 120px;
      -moz-border-radius:  10px 100px / 120px;
      -webkit-border-radius:  10px 100px / 120px;
      }
      .radius_6 {
      border-radius: 25% 10%;
      -moz-border-radius:  25% 10%;
      -webkit-border-radius:  25% 10%;
      }
      .radius_7 {
      border-radius: 50% 20% / 10% 40%;
      -moz-border-radius:  50% 20% / 10% 40%;
      -webkit-border-radius:  50% 20% / 10% 40%;
      }
      .radius_8 {
      border-radius: 50%;
      -moz-border-radius:  50%;
      -webkit-border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2> Border-radius examples</h2>
    <div class="radius_1"></div>
    <br />
    <div class="radius_2"></div>
    <br />
    <div class="radius_3"></div>
    <br />
    <div class="radius_4"></div>
    <br />
    <div class="radius_5"></div>
    <br />
    <div class="radius_6"></div>
    <br />
    <div class="radius_7"></div>
    <br />
    <div class="radius_8"></div>
  </body>
</html>

Values

Value Description
length Sets the rounding size of the corners.
% Sets the rounding size of the corners in percent.
initial Makes the property use its default value.
inherit Inherits the property from its parent element.

Related Resources

Easy tool for generating border radius code.

Border-top-right radius, border-top-left-radius, border-bottom-left-radius, border-bottom-right-radius.

Browser support

4.0+ 9.0+ 12.0+ 4.0+ 5.0+ 10.5+




Related articles