Fandom

HTML & CSS Wiki

-moz-outline-radius

649pages on
this wiki
Add New Page
Comments0 Share

The CSS -moz-outline-radius Mozilla extension property is used to give outlines rounded corners. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out. -moz-outline-radius is a shorthand property to set the individual values of the -moz-outline-radius-topleft, -moz-outline-radius-topright, -moz-outline-radius-bottomright, and -moz-outline-radius-bottomleft properties.

Values

One to four values can be specified.

If one is specified, it applies to all corners.

If two is specified, the first value applies to the top left and bottom right corners and the second value applies to the top right and bottom left corners.

If three values are specified, the first value applies to the top left corner. The second value applies to the top right and bottom left corners. The third value applies to the bottom right corner.

If four values are specified, the first value applies to the top left corner. The second value applies to the top right corner. The third value applies to the bottom right corner and the fourth value applies to the bottom left corner.

Value Description
<length> Specifies a length value for the radius of the outline. Examples of lengths are px, em, etc.
<percentage> Specifies a percentage value. See border-radius for more info.


HTML example:

<span style="outline:red solid medium; -moz-outline-radius:10px;">TEXT</span>


CSS example:

outline: doted red;

-moz-outline-radius: 12% 1em 25px;
  /* is equivalent to: */
-moz-outline-radius-topleft: 12%;
-moz-outline-radius-topright: 1em;
-moz-outline-radius-bottomright: 35px;
-moz-outline-radius-bottomleft: 1em;

Note: dotted and dashed borders when rendered with a radius will produce a solid outline.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.