CSS3 Box Sizing

By changing this value to “border-box,” the width and height values then include the borders and padding.

#box {
 width: 100px;
 height: 100px;
 background: #eee; padding: 10px;
 border: 10px solid #666; -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;


Opera 8.5+: box-sizing
Firefox 1-3: -moz-box-sizing (unprefixed in modern versions)
Safari 3: -webkit-box-sizing (unprefixed in modern versions)
IE8+: box-sizing

When can I use...


Related Posts

CSS3 Gradient Button

, CSS3 font face, CSS3 RGBA, CSS3 Box shadow, CSS3 Text shadow, CSS3 Gradient Background, CSS3 Tooltip

CSS3 Tooltip