Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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>

    Output:
    percentage

  • 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



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!