CSS | -moz-outline-radius property

Last Updated : 23 Jan, 2020

The -moz-outline-radius property is used to specify the radius of an outline. It is used to give rounded corners to outlines. This property is only supported in Firefox.

Syntax:

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

Property Values:

length: This is used to set the outline radius in length units. The default value of this property is 0.
The value can be specified in 4 formats.

When one value is specified then the radius would be applied to all the corners of the element.
When two values are specified, then the first applies to the top-left and bottom-right corners and the second value applies to the top-left and bottom-right corners.
When three values are specified, the first one applies to the top-left corner, the second one applies to the top-right and bottom-left corners and the third one applies to the bottom-right corner.
When four values are specified, the first one applies to the top-left corner, the second one applies to the top-right corner, the third one applies to the bottom-right corner and the fourth one applies to the bottom-left corner.

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title> 
    -moz-outline-radius property 
  </title> 
  <style> 
    .elem-1 { 
      outline: dotted; 
      -moz-outline-radius: 5px; 
  
      width: 300px; 
      padding: 20px; 
      margin: 15px; 
    } 
  
    .elem-2 { 
      outline: dotted; 
      -moz-outline-radius: 5px 50px; 
  
      width: 300px; 
      padding: 20px; 
      margin: 15px; 
    } 
  
    .elem-3 { 
      outline: dotted; 
      -moz-outline-radius: 5px 50px 20px; 
  
      width: 300px; 
      padding: 20px; 
      margin: 15px; 
    } 
  
    .elem-4 { 
      outline: dotted; 
      -moz-outline-radius: 5px 50px 20px 100px; 
  
      width: 300px; 
      padding: 20px; 
      margin: 15px; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color: green"> 
    GeeksforGeeks 
  </h1> 
  <b> 
    -moz-outline-radius 
  </b> 
  <div class="elem-1"> 
    This div has an outline-radius 
    of 5px. 
  </div> 
  <div class="elem-2"> 
    This div has an outline-radius 
    of 5px 50px. 
  </div> 
  <div class="elem-3"> 
    This div has an outline-radius 
    of 5px 50px 20px. 
  </div> 
  <div class="elem-4"> 
    This div has an outline-radius 
    of 5px 50px 20px 100px; 
  </div> 
</body> 
</html> 

Output:
length

percentage: This is used to set the outline radius in percentage values. The values are applied in a similar format as in the length values. The default value of this property is 0.

Example:

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> 
    -moz-outline-radius property 
  </title> 
  <style> 
    .elem-1 { 
      outline: dotted; 
      -moz-outline-radius: 10%; 
  
      width: 300px; 
      padding: 20px; 
      margin: 15px; 
    } 
  
    .elem-2 { 
      outline: dotted; 
      -moz-outline-radius: 10% 50%; 
  
      width: 300px; 
      padding: 20px; 
      margin: 15px; 
    } 
  
    .elem-3 { 
      outline: dotted; 
      -moz-outline-radius: 10% 50% 25%; 
  
      width: 300px; 
      padding: 20px; 
      margin: 15px; 
    } 
  
    .elem-4 { 
      outline: dotted; 
      -moz-outline-radius: 10% 50% 25% 75%; 
  
      width: 300px; 
      padding: 20px; 
      margin: 15px; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color: green"> 
    GeeksforGeeks 
  </h1> 
  <b> 
    -moz-outline-radius 
  </b> 
  <div class="elem-1"> 
    This div has an outline-radius 
    of 10%. 
  </div> 
  <div class="elem-2"> 
    This div has an outline-radius 
    of 10% 50%. 
  </div> 
  <div class="elem-3"> 
    This div has an outline-radius 
    of 10% 50% 25%. 
  </div> 
  <div class="elem-4"> 
    This div has an outline-radius 
    of 10% 50% 25% 75%; 
  </div> 
</body> 
</html> 