HTML and CSS Reference
Browser-Specific Properties & Values
What are all those hyphens and letters on the box-sizing property?
As CSS3 was introduced, browsers gradually began to support different proper-
ties and values, including the box-sizing property, by way of vendor prefixes.
As parts of the CSS3 specification are finalized and new browser versions are re-
leased, these vendor prefixes become less and less relevant. As time goes on,
vendor prefixes are unlikely to be a problem; however, they still provide support
for some of the older browsers that leveraged them. We may run across them
from time to time, and we may even want to use them should we wish to support
Vendor prefixes may be seen on both properties and values, all depending on the
CSS specification. Here they are shown on the box-sizing property. Browser
vendors were free to chose when to use a prefix and when not to. Thus, some
properties and values require vendor prefixes for certain browser vendors but not
Moving forward, when a property or value needs a vendor prefix, the prefix will
only be used in the introduction of that property or value (in the interest of keep-
ing our code digestible and concise). Do not forget to add the necessary vendor
prefixes when you're actually writing the code.
For reference, the most common vendor prefixes are outlined here:
• Mozilla Firefox: -moz-
• Microsoft Internet Explorer: -ms-
• Webkit (Google Chrome and Apple Safari): -webkit-
The padding-box value alters the box model by including any padding property val-
ues within the width and height of an element. When using the padding-box value,
if an element has a width of 400 pixels and a padding of 20 pixels around every side,
the actual width will remain 400 pixels. As any padding values increase, the content
size within an element shrinks proportionately.
If we add a border or margin , those values will be added to the width or height
properties to calculate the full box size. For example, if we add a border of 10 pixels and