CSS | -moz-outline-radius property

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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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

Im listening

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.