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:
-
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:
- 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:
Share your thoughts in the comments
Please Login to comment...