moz-border-radius (CSS property)

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;
}
```

Frequently Asked Questions (FAQs) about -moz-border-radius CSS Property

What is the -moz-border-radius CSS property used for?

The -moz-border-radius CSS property is a Mozilla-specific property used to create rounded corners on HTML elements. It allows you to specify the radius of the border’s curve, giving you control over the roundness of the corners. This property is particularly useful in web design for creating buttons, cards, or any other elements that benefit from having rounded corners.

Is the -moz-border-radius property still necessary?

The -moz-border-radius property was initially used for Firefox browsers as they did not support the standard border-radius property. However, since Firefox 4.0 and onwards, the standard border-radius property is fully supported. Therefore, the use of -moz-border-radius is no longer necessary unless you’re developing for older versions of Firefox.

How does the -moz-border-radius property work?

The -moz-border-radius property works by accepting one or two values that define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge. The first value is the horizontal radius, and the second is the vertical radius. If only one value is given, it is used for both radii.

Can I use percentages with the -moz-border-radius property?

Yes, you can use percentages with the -moz-border-radius property. The percentage is calculated with respect to the width and height of the border box, and the resulting shape is a symmetrical ellipse, or a circle if the two lengths are equal.

What is the difference between -moz-border-radius and border-radius?

The -moz-border-radius is a vendor-specific property used in older versions of Firefox, while border-radius is the standard CSS property. Both properties serve the same purpose, which is to create rounded corners. However, it’s recommended to use the standard border-radius property as it’s supported by all modern browsers.

How can I create a circle using the -moz-border-radius property?

To create a circle using the -moz-border-radius property, you need to set the property to 50%. This will create a perfect circle, given that the element has equal width and height.

Can I use different values for each corner with the -moz-border-radius property?

Yes, you can specify different values for each corner by using the -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomright, and -moz-border-radius-bottomleft properties.

What happens if I use negative values with the -moz-border-radius property?

Negative values are not allowed with the -moz-border-radius property. If you use a negative value, the declaration will be ignored and the property will not be applied.

Can I use the -moz-border-radius property with other border properties?

Yes, the -moz-border-radius property can be used in conjunction with other border properties such as border-style, border-width, and border-color. This allows you to create a variety of styles for your rounded corners.

Is the -moz-border-radius property supported in all browsers?

The -moz-border-radius property is a Mozilla-specific property, so it’s only supported in Firefox. However, all modern browsers support the standard border-radius property, so it’s recommended to use that instead for cross-browser compatibility.