CSS3 rules bring lots of interesting features.

Take border-radius, for example. The standard says that if you write this rule:

div.rounded-corners {
  border-radius: 5px;
}

I should get a 5px border radius.

But neither mozilla nor webkit implement this. However, they implement the same thing, with the same parameters, with a different name (-moz-border-radius and -webkit-border-radius, respectively).

In order to satisfy as many browsers as possible, you end up with this:

div.rounded-corners {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

I can see two obvious disadvantages:

• Copy-paste code. This has obvious risks that I will not discuss here.
• The W3C CSS validator will not validate these rules.

At the same time, I don't see any obvious advantages.

I believe that the people behind mozilla and webkit are more intelligent than myself. There must be some good reasons to have things structured this way. It's just that I can't see them.

So, I must ask you people: why is this?