CSS | -moz-outline-radius property - GeeksforGeeks

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:
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:
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>Output:
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>
Output:
initial: This is used to set the property to its default value.
inherit: This is used to inherit the property from its parent.
Supported Browsers: The browser supported by -moz-outline-radius property are listed below:
Firefox 1.5
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript