Question

I want to use rounded border in my site. So, I use the CSS rounded border property like this:

-moz-border-radius-topright: 7px;

It works well in Firefox, but in Google Chrome, it does not work. Why?

Answer 1

The reason why, is that is a Mozilla specific (i.e. Firefox) CSS selector. The relevant CSS3 selector would be:

border-top-right-radius

Webkit (i.e. Safari) also has a non-standard selector: -webkit-border-top-right-radius. Since Google Chrome is based on Webkit, I’d expect -webkit-border-top-right-radius to work.

I’d personally include all 3 selectors (as below), then you won’t need to edit sometime in the future when everyone catches up with the standard. (Firefox 3.5 is already there as far as I know).

.thing{
...some styles...
-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
}