CSS3 - Rounded Corners

CSS3 rounded corners are created using the border-radius property. This property allows you to specify the radius of the corners of an element's outer border edge.

Possible Values

<length>: Size of circle radius is denoted, using length values. Negative values are not valid.
<percentage>: Size of circle radius is denoted, using percentage values.
- Horizontal axis percentage is referred to the width of the box.
- Vertical axis percentage is referred to the height of the box.
- Negative values are not valid.

Applies to

All the HTML elements, except for table and inline-table elements with border-collapse set to collapse. Applies to ::first-letter.

DOM Syntax

object.style.borderRadius = "length";

The following diagram demonstrates the different border-radius corners for reference:

The following table shows the possible values for rounded corners as follows −

Value		Description
radius		Is a <length> or a <percentage> that sets the radius for all four corners of the element. It is used only in the one-value syntax.
top-left and bottom-right		Is a <length> or a <percentage> that sets the radius for the top-left and bottom-right corners of the element. It is used only in the two-value syntax.
top-right and bottom-left		Is a <length> or a <percentage> that sets the radius for the top-right and bottom-left corners of the element. It is used only in the two- and three-value syntaxes.
top-left		Is a <length> or a <percentage> that sets the radius for the top-left corner of the element. It is used on three and four value syntaxes.
top-right		Is a <length> or a <percentage> that sets the radius for the top-right corners of the element. It is used only in the four-value syntax.
bottom-right		Is a <length> or a <percentage> that sets the radius for the bottom-right corners of the element. It is used only in the three and four-value syntaxes.
bottom-left		Is a <length> or a <percentage> that sets the radius for the bottom-left corners of the element. It is used only in the four-value syntax.

Individual border radius properties, such as border-top-left-radius, cannot inherit from their parent element. Instead, you must use the individual longhand properties to set the border radius of each corner.

CSS Border Radius - Length Value

The following example demostrates how to use the border-radius property to create rounded corners for all four corners of a box −

<html>
<head>
<style>
   .rounded-box {
      width: 200px;
      height: 100px;
      background-color: pink;
      line-height: 100px;
      border-radius: 20px;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      This is a rounded corner box.
   </div>
</body>
</html>

You can use the border-radius property to create rounded corners on box, borders, and images.

Here is an example −

<html>
<head>
<style>
   .rounded-box {
      width: 200px;
      height: 100px;
      background-color: pink;
      border-radius: 20px;
      margin-bottom: 10px;
   }
   .border-box {
      width: 200px;
      height: 100px;
      border-radius: 2em;
      border: 3px solid green; 
      margin-bottom: 20px;   
   }
   .img-border-radius {
      background-image: url(images/tree.jpg);
      background-size: 100% 100%;
      border-radius: 20%;
      width: 200px;
      height: 150px;
   }
</style>
</head>
<body>
   <div class="rounded-box">
      This is a rounded corner box.
   </div>
   <div class="border-box">
      This is a rounded corner box.
   </div>
   <div class="img-border-radius">
      This is a rounded corner image.
   </div>
</body>
</html>

You can use the border-radius property to create different rounded corner styles on an element.

Here is an example −

<html>
<head>
<style>
   .rounded-box {
      width: 200px;
      height: 100px;
      background-color: pink;
      margin: 10px;
      padding: 5px;
   }
   .rounded-box.tl {
      border-radius: 30px 0 0 0;
   }
   .rounded-bo x.tr {
      border-radius: 0 2em 0 0;
   }
   .rounded-box.bl {
      border-radius: 0 0 0 15%;
   }
   .rounded-box.br {
      border-radius: 0 0 30px 0;
   }
   .rounded-box.tl-br {
      border-radius:  2em 0 2em 0;
   }
   .rounded-box.tr-bl {
      border-radius: 0 15% 0 15%;
   }
</style>
</head>
<body>
   <div class="rounded-box tl">
      top-left rounded corner.
   </div>
   <div class="rounded-box tr">
      top-right rounded corner.
   </div>
   <div class="rounded-box bl">
      bottom-left rounded corner.
   </div>
   <div class="rounded-box br">
      bottom-right rounded corner.
   </div>
   <div class="rounded-box tl-br">
      top-left and bottom-right rounded corners.
   </div>
   <div class="rounded-box tr-bl">
      top-right and bottom-left rounded corners.
   </div>
</body>
</html>

CSS Rounded Corner Images

You can use the border-radius property to create different rounded corner styles on elements.

Here is an example −

<html>
<head>
<style>
   img {
      width: 200px;
      height: 100px;
      margin: 10px;
   }
   .top-left {
      border-radius: 30px 0 0 0;
   }
   .top-right {
      border-radius: 0 2em 0 0;
   }
   .bottom-left {
      border-radius: 0 0 0 15%;
   }
   .bottom-right {
      border-radius: 0 0 30px 0;
   }
   .tl-br {
      border-radius:  2em 0 2em 0;
   }
   .tr-bl {
      border-radius: 0 15% 0 15%;
   }
</style>
</head>
<body>
   <h4>top-left rounded corner.</h4>
   <img class="top-left" src="images/tree.jpg" />
   <h4>top-right rounded corner.</h4>
   <img class="top-right" src="images/tree.jpg" />
   <h4> bottom-left rounded corner.</h4>
   <img class="bottom-left" src="images/tree.jpg" />
   <h4>bottom-right rounded corner.</h4>
   <img class="bottom-right" src="images/tree.jpg" />
   <h4>top-left and bottom-right rounded corners.</h4>
   <img class="tl-br" src="images/tree.jpg" />
   <h4>top-right and bottom-left rounded corners.</h4>
   <img class="tr-bl" src="images/tree.jpg" />
</body>
</html>

We can create a circle and an ellipse using the CSS border-radius property.

Here is an example −

<html>
<head>
<style>
   .rounded-circle {
      width: 100px;
      height: 100px;
      background-color: pink;
      text-align: center;
      border-radius: 50%;
   }
   .rounded-ellipse {
      width: 200px;
      height: 100px;
      background-color: pink;
      text-align: center;
      border-radius: 50%;
   }
</style>
</head>
<body>
   <div class="rounded-circle">
      circle
   </div>
   <div class="rounded-ellipse">
      ellipse
   </div>
</body>
</html>

CSS border-radius - Related Properties

Following is the list of CSS properties related to border-radius:

property	value
border-top-left-radius	Sets the roundness of the top-left corner of an element's border.
border-top-right-radius	Sets the roundness of the top-right corner of an element's border.
border-bottom-right-radius	Sets the roundness of the bottom-right corner of an element's border.
border-bottom-left-radius	Sets the roundness of the bottom-left corner of an element's border.
border-start-start-radius	Sets the roundness of the block-start and inline-start corner of an element's border.
border-start-end-radius	Sets the roundness of the block-start and inline-end corner of an element's border.
border-end-start-radius	Sets the roundness of the block-end and inline-start corner of an element's border.
border-end-end-radius	Sets the roundness of the block-end and inline-end corner of an element's border.