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