Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mohamedkhallouq
GitHub Repository: mohamedkhallouq/content
 Path: blob/main/files/en-us/web/css/-moz-outline-radius/index.md
6565 views
---
title: "-moz-outline-radius"
slug: Web/CSS/-moz-outline-radius
page-type: css-shorthand-property
status:
  - deprecated
  - non-standard
browser-compat: css.properties.-moz-outline-radius
---

{{CSSRef}}{{deprecated_header}}{{Non-standard_header}}

In Mozilla applications like Firefox, the -moz-outline-radius CSS shorthand property can be used to give an element's {{cssxref("outline")}} rounded corners.

/* One value */
-moz-outline-radius: 25px;

/* Two values */
-moz-outline-radius: 25px 1em;

/* Three values */
-moz-outline-radius: 25px 1em 12%;

/* Four values */
-moz-outline-radius: 25px 1em 12% 4mm;

/* Global values */
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

Values

Note: Elliptical outlines and <percentage> values follow the syntax described in {{cssxref("border-radius")}}.

One, two, three or four <outline-radius> values, represents one of:

  • {{cssxref("<length>")}}

    • : See {{cssxref("<length>")}} for possible values.

  • {{cssxref("<percentage>")}}

    • : A {{cssxref("<percentage>")}}; see {{cssxref("border-radius")}} for details.

  • If a single value is set, it applies to all 4 corners.

  • If two values are set, the first one applies to the top-left and bottom-right corners and the second one to the top-right and bottom-left corners.

  • If three values are set, the first one applies to the top-Left corner, the second one to the top-right and bottom-left corners and the third one to the bottom-right corner.

  • If four values are set, the first one applies to the top-left corner, the second one to the top-right corner, the third one to the bottom-right corner and the fourth one to the bottom-left corner.

Formal definition

{{CSSInfo}}

Formal syntax

 -moz-outline-radius =
  <outline-radius>{1,4} [ / <outline-radius>{1,4} ]?

Examples

Rounding an outline

Note: This example will not display the desired effect if you are viewing this in a browser other than Firefox.

HTML

<p>This element has a rounded outline!</p>

CSS

p {
  margin: 5px;
  border: 1px solid black;
  outline: dotted red;
  -moz-outline-radius: 12% 1em 25px;
}

Result

{{EmbedLiveSample('Rounding_an_outline')}}

Notes

  • dotted or dashed radiused corners were rendered as solid until Firefox 50, Firefox bug 382721

  • Future versions of Gecko/Firefox may drop this property completely. See Firefox bug 593717.

Specifications

Not part of any standard.

Browser compatibility

{{Compat}}

See also