HTML & CSS

moz-border-radius (CSS property)

    Adam Roberts
    Share

    moz-border-radius was Gecko’s equivalent to CSS3’s border-radius property, although it differed in a few respects. The shorthand property allowed web developers to specify rounded borders, or rounded backgrounds if no borders have been defined.

    In Gecko 2.0 moz-border-radius was renamed to border-radius; -moz-border-radius was supported as an alias until Gecko 12.0.

    In order to conform to the CSS3 standard, Gecko 2.0

    • changed the handling of values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
    • made rounded corners clip content and images (if overflow: visible is not set)

      Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).

      Border-radius

      The border-radius property is a shorthand property that can accept up to four values. The values represent (in order,) the top-left, top-right, bottom-right, and bottom-left corners. As is the case with any shorthand properties that use unit values, any omitted values are inherited from existing ones.

      You can explicitly target individual corners of an element using the longhand syntax. For example:

      .media img {
  border-top-left-radius: 20%;
  border-top-right-radius: 20%;
  border-bottom-right-radius: 20%;
  border-bottom-left-radius: 20%;
}

      You can see clearly why, in most cases, you’ll use the shorthand syntax. Even if you want to target a single corner, it’s much more efficient to do this instead:

      .media img {
  border-radius: 20% 0 0 0;
}