Should I use prefixes in CSS in these cases?

Question

This is some code from some Google webpage (I found it on another question) My question is: if the values are the same, why are prefixes needed?

.example {
  -webkit-border-image: url(img.png) 10px / 20px round; /* Ch <16, Saf <6 */
     -moz-border-image: url(img.png) 10px / 20px round; /* Fx <15 */
       -o-border-image: url(img.png) 10px / 20px round; /* Op (not mini) */
          border-image: url(img.png) 10px / 20px round; /* Ch 16+, Saf 6+ */
}

Answer 1

These are called vendor prefixes.

Have you seen the comments next to the lines? It means which browsers understand that line with that prefix.

For features that do not have a finalized, standard version, browser vendors can use these vendor prefixes to implement them. So let's say when Chrome 15 came out, border-image did not have a widely accepted standard that won't change, so they used -webkit-border-image. This way, if the final standard will be different from the previous version, older browsers displaying pages written with the new syntax won't break. When Chrome 16 came out, border-image was considered final, so it is supported in that version.

Answer 2

For cross Browser Support. Its there in your question itself