Skip to main content

moz-border-radius (CSS property)

By Adam Roberts



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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).


    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;

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!

Google, Netflix and ILM are Python users. Maybe you should too?