Why should we define border-radius for a particular browser?

Question

border-radius is a CSS3 property and it is used to make rounded corners. I wanted to make corners of one of my images rounded.

So I styled my image using CSS as below

#Images{
margin-top:20%;
margin-left:20%;
border:2px solid #BC8F8F;
padding:2px;
border-radius:40px;

}

I got the result as expected (with rounded corners) when this is run in firefox 26.0, chrome 32.0.1700.102 and IE 9.0.

But I found the below styling in a blog which defines border radius separately for firefox and webkit (I guess webkit is chrome and safari, correct me if I am wrong)

div{

background-image: url(beach.jpg);

width: 375px;

height: 500px;

border: 8px solid #666;

 border-radius: 40px;

-moz-border-radius: 40px;

-webkit-border-radius: 40px;

}

Why should we define border-radius for each and every browser when we get the result without doing it?

possible duplicate of CSS3: Do we still need to use browser prefixes? — Jukka K. Korpela
This question has been asked several times, in different forms and from different perspectives. The overall quality of answers to them is not good, but this cannot be improved by new copies of the question. — Jukka K. Korpela

Quentin Quentin · Accepted Answer · 2014-02-02T11:50:46

TL;DR: You shouldn't.

Vendor prefixed properties (-something-) are experimental implementations. They are not standard CSS (although the naming convention is blessed by the CSS specification to avoid conflicts with other experiments).

They are used before a property becomes standard so that authors can try it out and provide feedback to help develop the specification (and find bugs in the particular browser's implementation).

border-radius has been supported through a standard property for a long time. There is no reason to use experimental vendor prefixed versions of the property as it is no longer experimental.

The CSS 2.1 specification says:

Authors should avoid vendor-specific extensions

… since experimental implementations are designed for experimenting with, not use in general websites. They might do different things in different versions of a browser as the specification is developed and they should become unsupported in the future as the standard versions take over.

Why should we define border-radius for a particular browser?

2 Answers