The **`border-radius` property** is used to round corners of elements.

# Syntax

The `border-radius` property can have one to four values. These values can be in:
- `pixels`
- `percentage`
- `em`

<html>
 <head>
 </head>
 <body>
   <div id="one-value">
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp   Border-radius with One-Value</p>  
    </div> 
    <br> 
   <div id="two-values">
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp   Border-radius with Two-Values</p>  
   </div>
    <br> 
   <div id="Three-values">
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp   Border-radius with Three-Values</p>  
   </div>   
    <br> 
   <div id="Four-values">
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp   Border-radius with Four-Values</p>  
   </div>     
 </body>
</html>

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

#one-value
{
    background-color:darkcyan ;
    padding: 5px;
    border-radius: 20px; /*This value applies to all 4 corners*/
}
#two-values
{
    background-color:darkcyan;
    padding: 5px;
    border-radius: 20px 10px; /*First value(Top-left,Bottom-right),2nd value(Top-right,Bottom-left)*/
}
#three-values
{
    border:5px solid darkgrey;
    padding: 5px;
    border-radius: 20% 30% 9%; /*First value(Top-left),2nd value(Top-right,Bottom-left),3rd value(Bottom-right) */
}
#Four-values
{
    border:5px solid darkgrey;
    padding: 5px;
    border-radius: 30% 15% 20% 25%; /*First value(Top-left),2nd value(Top-right),3rd value(Bottom-right),4th value(Bottom-left) */
}

codemirror

<html>
 <head>
 </head>
 <body>
   <div id="one-value">
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp   Border-radius with One-Value</p>  
    </div> 

    <br> 
   <div id="Four-values">
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp   Border-radius with Four-Values</p>  
   </div>     
 </body>
</html>

#one-value
{
    border:2px dotted goldenrod;
    padding: 2px;
    border-radius: 3em /*This value applies to all 4 corners*/
}

#Four-values
{
    border:2px dotted goldenrod;
    padding: 2px;
    border-radius: 3em 1em 2em 5em; /*First value(Top-left),2nd value(Top-right),3rd value(Bottom-right),4th value(Bottom-left) */
}

# Making elliptical shapes
`Border-radius` is also used to make elliptical shapes by specifying the horizontal and vertical radii of elements.
 
It is done by using `'/'`  between two values.

The value is set to `initial` to get the default value of the property. 

<html>
 <head>
 </head>
 <body>
   <div id="Example1">
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp It is equivalent to All Corner's border-radius set to 10px 30px</p>  
    </div> 
    <br> 
   <div id="Example2">
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Here Top-right & Bottom-left radius : 2em 1em</p>
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  top-left radius:3em 5em</p>
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  bottom-right radius:4em 1em  </p>  
   </div>
    <br> 
   <div id="Example3">
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Example3</p>  
   </div>   
     <br> 
   <div id="Example4">
   <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Example4</p>  
   </div>   

#Example1
{
    background-color:lavender;
    padding: 1px;
    border-radius: 10px/30px /*Horizontal radius/Vertical radius*/
}
#Example2
{
    background-color:lavender;
    padding: 1px;
    border-radius: 3em 2em 4em/5em 1em; /*Horizontal radius/Vertical radius*/
}
#Example3
{
    background-color:lavender;
    padding: 1px;
    border-radius: 3em/1em /*Horizontal radius/Vertical radius*/
}
#Example4
{
    background-color:lavender;
    padding: 1px;
    border-radius: initial /*Set default value*/
}

What is border-radius property in CSS?

The border-radius property in CSS rounds element corners and can create elliptical shapes with specified values.