CSS - border-radius Property

Quiz

CSS border-radius property is used to make the corners of the outer border of an element, rounded. It is a shorthand property for the properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. Depending on the number of values provided (one to four) to the property, the different portions are rounded.

Syntax

border-radius: length | percentage | initial | inherit;

Property Values

Value	Description
length	It specifies the roundness of the corners in length units (eg.10px 20px). Default is 0.
percentage	It specifies the roundness of the corners in percentage (eg. 10% 20%).
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Border Radius Property

The following examples explain the border-radius property with different values.

Border Radius Property with Length Values

To define the roundness of the corners of the outer border of an element, we can specify the radius in length values (eg. 10px 20px 30px 2px, 25px 40px etc.). The property depends on the number of values passed. The following example shows this by taking different number of values.

Example

<!DOCTYPE html>
<html>

<style>
   .container {
      box-shadow: 10px 10px 10px grey;
      display: grid;
      justify-items: center;
      align-items: center;
      padding: 20px;
      margin-bottom: 20px;
   }

   .box {
      height: 50px;
      width: 50px;
      padding: 10%;
      border: 1px solid grey;
      background-color: lightgreen;
   }

   #one {
      border-radius: 20px;
   }

   #two {
      border-radius: 15px 50px;
   }

   #three {
      border-radius: 15px 45px 90px;
   }

   #four {
      border-radius: 15px 45px 75px 10px;

   }
</style>

<head>
</head>

<body>
   <h2>
   CSS border-radius property
   </h2>
   <div class="container">
      <p>
         This box uses a single value 20px
         for the border-radius property. 
         So all the four corners top-left,
         top-right, bottom-right and bottom-left
         have the same radius corners as shown here.</p>
      <p id="one" class="box"> 
         20px
      </p>
   </div>
   <div class="container">
      <p>
         This box uses two values 15px 50px 
         for the border-radius property. top-left 
         and bottom-rigth corners have 15px radius
         while top-right and bottom-left have 50px
         radii corners as shown here.
      </p>
      <p id="two" class="box">
         15px 50px
      </p>
   </div>
   <div class="container">
      <p>
         This box uses three values
         15px 45px 90px for the border-radius
         property. top-left has 15px radius, 
         top-right and bottom-left have 45px 
         radius and bottom-right has 90px radius
      as shown here.
      </p>
      <p id="three" class="box">
         15px 45px 90px
      </p>
   </div>
   <div class="container">
      <p>
         This box uses four values 15px
         45px 75px 10px for the border-radius
         property. top-left has 15px radius, 
         top-right has 45px, bottom-right has
         75px and bottom-left has 10px radii 
         corners as shown here.
      </p>
      <p id="four" class="box">
         15px 45px 75px 10px
      </p>
   </div>
</body>

</html>

Border Radius Property with Percentage Values

To define the roundness of the corners of the outer border of an element, we can specify the radius in percentage values (eg. 10% 20% 30% 2%, 25% 40% etc.). The property depends on the number of values passed. The following example shows this by taking different number of values.

Example

<!DOCTYPE html>
<html>

<style>
   .container {
      box-shadow: 10px 10px 10px grey;
      display: grid;
      justify-items: center;
      align-items: center;
      padding: 20px;
      margin-bottom: 20px;
   }

   .box {
      height: 50px;
      width: 50px;
      padding: 10%;
      border: 1px solid grey;
      background-color: lightblue;
   }

   #one {
      border-radius: 20%;
   }

   #two {
      border-radius: 15% 50%;
   }

   #three {
      border-radius: 15% 45% 90%;
   }

   #four {
      border-radius: 15% 45% 75% 10%;

   }
</style>

<head>
</head>

<body>
   <h2>
      CSS border-radius property
   </h2>
   <div class="container">
      <p>
         This box uses a single value 20%
         for the border-radius property. 
         So all the four corners top-left,
         top-right, bottom-right and bottom-left
         have the same radius corners 
         as shown here.
      </p>
      <p id="one" class="box">
         20%
      </p>
   </div>
   <div class="container">
      <p>
         This box uses two values 15% 50%
         for the border-radius property. 
         top-left ad bottom-rigth corners 
         have 15% radius while top-right and
         bottom-left have 50% radii corners 
         as shown here.
      </p>
      <p id="two" class="box">
         15% 50%
      </p>
   </div>
   <div class="container">
      <p>
         This box uses three values 15% 45% 90%
         for the border-radius property. top-left
         has 15% radius, top-right and bottom-left
         have 45% radius and bottom-right has 90% 
         radius as shown here.
      </p>
      <p id="three" class="box">
         15% 45% 90%
      </p>
   </div>
   <div class="container">
      <p>
         This box uses four values 15% 45% 75% 10%
         for the border-radius property. top-left 
         has 15% radius, top-right has 45%, 
         bottom-right has 75% and bottom-left has
         10% radii corners as shown here.
      </p>
      <p id="four" class="box">
         15% 45% 75% 10%
      </p>
   </div>
</body>

</html>

Border Radius Property with Mixed Values

To define the roundness of the corners of the outer border of an element, we can specify the radius in combination of length and percentage values (eg. 10px 20%, 15px 40% etc.). The following example shows this.

Example

<!DOCTYPE html>
<html>

<style>
   .container {
      display: grid;
      justify-items: center;
      align-items: center;
      padding: 20px;
      margin-bottom: 20px;
   }

   .box {
      height: 50px;
      width: 50px;
      padding: 10%;
      border: 1px solid grey;
      background-color: lightpink;
   }

   #one {
      border-radius: 15px 40%;
   }
</style>

<head>
</head>

<body>
   <h2>
      CSS border-radius property
   </h2>
   <div class="container">
      <p>
         This box uses a combination of length
         and percentage values. top-left and 
         bottom-right corners are given 15px 
         radii while top-right and bottom-left
         are given with 40% radii as shown here.
      </p>
      <p id="one" class="box">
         15px 40%
      </p>
   </div>

</body>

</html>

Note: The border-radius property accepts upto four values, so depending on the number of values given, the corners will be rounded accordingly.

One Value: if single value is given, it will be applied to top-left, top-right, bottom-right and bottom-left corners.
Two Values: if two values are given, first value will be applied to top-left and bottom-right and the second value will be applied to top-right and bottom-left corners.
Three Values: if three values are given, first value will be applied to top-left, second value to top-right and bottom-left corners and the last value will be applied to bottom-right corner.
Four Values: if four values are given, first value will be applied to top-left, second vaue to top-right, third value to bottom-right and fourth value to bottom-left corners.

Supported Browsers

Property
border-radius	5.0	9.0	4.0	5.0	10.5

css_reference.htm

Print Page