Proper Syntax
input {-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Browser Support
As with any modern CSS property, there are varying rendering issues for older browsers. If you still need to support those, you have to remember to use the old CSS methods as a fall back to achieve a fairly similar look.- Internet Explorer (version 8 and above): box-sizing
- Chrome (all versions): box-sizing
- Firefox (all versions, use vendor prefix): -moz-box-sizing
- Safari (all versions, use vendor prefix): -webkit-box-sizing
- Opera (version 8.5 and above): box-sizing
About the author: John Velasco
As a Senior Front End Developer for R2i, JV creates fully functional themes for various content management systems including DNN, Drupal and WordPress. He has a knack for both web design and development which allows him to quickly understand what can actually work on a website rather than just look cool. JV is also an enthusiastic volleyball player and thanks to his young and busy children he is always up to speed on the most current pop songs and dance moves.
