What is Outline radius in CSS ?

Last Updated : 11 Jul, 2022

In this article, we will see what is the Outline radius property in CSS, along with knowing the different property available in CSS to make the rounded corner.

The outline-radius property is used to specify the radius of an outline. It is used to give rounded corners to outlines. This property can only be used in Firefox2-87 (till march 2021) and from Firefox 88, outline-property follows the shape created by border-radius automatically, so this property is no longer needed. Now, to give rounded corners we have to use the border-radius property.

The border-radius property is used to round the corners of an element. We can set a single radius to make the corners circular, or two radii to make corners elliptical. This property can contain one, two, three, or four values.

Syntax:

border-radius: <length> {1-4} | <percentage> (1-4} |
                      initial | inherit

Example 1: The following code example demonstrate how border-radius property can be utilized with one or two values is used to make the corners of an outline circular.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .box { 
            outline: solid; 
            width: 400px; 
            padding: 10px; 
            margin: 20px; 
        } 
  
        .box1 { 
            outline: solid; 
            border-radius: 20px; 
  
            width: 400px; 
            padding: 10px; 
            margin: 20px; 
        } 
  
        .box2 { 
            outline: solid; 
            border-radius: 5px 30px; 
  
            width: 400px; 
            padding: 10px; 
            margin: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Example of border-radius with only  
            one/two value to make the corners  
            of an outline circular. 
        </h3> 
  
        <div class="box"> 
            outline: solid; 
        </div> 
          
        <div class="box1"> 
            <p>border-radius: 20px;</div>p> 
            <p>20px applies on <b>all 4 corners!</b></p> 
        </div> 
  
        <div class="box2"> 
            <p>border-radius: 5px 30px;</p> 
  
            <p> 
                5px applies on <b>top-left and  
                bottom-right</b> corners. 
            </p> 
  
            <p> 
                30px applies on <b>top-right and  
                bottom-left</b> corners. 
            </p> 
        </div> 
    </center> 
</body> 
  
</html> 

Output:

Example 2: The following code example demonstrates how border radius property with three or four values is used to make the corners of an outline circular.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .box { 
            outline: solid; 
            width: 400px; 
            padding: 10px; 
            margin: 20px; 
        } 
  
        .box1 { 
            outline: solid; 
            border-radius: 10px 40px 20px; 
  
            width: 400px; 
            padding: 10px; 
            margin: 20px; 
        } 
  
        .box2 { 
            outline: solid; 
            border-radius: 10px 40px 20px 80px; 
  
            width: 400px; 
            padding: 10px; 
            margin: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Example of border-radius with  
            three/four values to make the  
            corners of an outline circular. 
        </h3> 
  
        <div class="box"> 
            outline: solid; 
        </div> 
          
        <div class="box1"> 
            <p>border-radius: 10px 40px 20px;</p> 
  
            <p>10px applies on <b>top-left</b> corner</p> 
  
            <p> 
                40px applies on <b>top-right and  
                bottom-left</b> corners. 
            </p> 
  
            <p>20px applies on <b>bottom-right</b> corner.</p> 
        </div> 
  
        <div class="box2"> 
            <p>border-radius: 10px 40px 20px 80px;</p> 
  
            <p>10px applies on <b>top-left</b> corner.</p> 
  
            <p>40px applies on <b>top-right</b> corner.</p> 
  
            <p>20px applies on <b>bottom-right</b> corner.</p> 
  
            <p>80px applies on <b>bottom-left</b> corner.</p> 
        </div> 
    </center> 
</body> 
  
</html> 