moz-border-radius

-->

-moz-border-radius is Gecko’s equivalent to CSS3’s border-radius property, although it differs in a few respects that are discussed below. This shorthand property allows us to specify rounded borders, or rounded backgrounds if no borders have been defined.


The main difference is that Gecko browsers prior to Gecko 1.9.1 (Firefox 3.5) do not support elliptical rounding and just specify the radius of the corner with a single value. The CSS3 property caters for elliptical rounding by allowing two values to be specified. Consider the following example:
.test{
  background-color: #ffffcc;
  -moz-border-radius: 10px 30px;
  border-radius: 10px 30px / 15px 25px;
  border: 1px solid #000;
  padding: 10px;
}