Question

I am new to HTML5 and CSS3. I was just seeing some CSS3 code which is as below:

.box
    {
        border-top-left-radius:5px;
        -webkit-border-bottom-left-radius:5px; 
        -moz-border-top-left-radius:5px;
         border:1px solid #8e8e8e;
         background-color:white;
         height:16px;
         padding:4px;
         padding-left:28px;
         padding-right:10px;
         color:#4a4a4a;
         float:left;

     }

I couldn’t get why after border-top-left-radius border radius is mentioned with -moz and -webkit prefixes? Is syntax for different browsers different? Is it now being standardized?

Answer 1

Yes, the syntax can be different with experimental properties. This is entirely up to a vendor to decide, because a vendor-prefixed property is considered proprietary and not part of the standard.

In particular, Mozilla called it -moz-border-radius-topleft, not -moz-border-top-left-radius. The code you’re looking at is mistaken (possibly a result of blind copying and pasting of declarations).

It has since been standardized to border-top-left-radius. The prefixed properties are only there to support older versions of browsers. For that matter, the unprefixed property should come last in order to ensure a browser’s best/most stable implementation of a property.