Box-Sizing property in CSS3

Box-Sizing property in CSS3

Are you finding it difficult to code the size of the boxed elements in your websites? Apply this plug-in in your website to make it easy to give some padding and borders to some box. Fixing the height and the width of the boxes is no more a difficult task; with the help of this plug-in it is much easier to do them. The presence of the padding and the borders involves the coder to calculate the require values to be entered. But this plug-in makes the require calculations and gives the required output. With such plug-in we can build websites quickly and easily.

For example, let’s say we have one

which has 200px of height and 100px of width. Let’s give padding of 30px for each side. Let’s see what happens.

If, you can measure out above box you’ll find that, it actually has, 260px width and 160px of height. That padding of 30px has been added up to the actual size of this ‘


Now, in CSS3 one interesting property called, box-sizing has been introduced to overcome this issue. What it does is, it prevents size of padding or border from adding up to the size of element. Here is the code to make this thing work across all major browsers.

[javascript language="css"]div.rounder{
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;

Above code will not include padding of, 30px to the width and height of our layer.

And output will be something like this

So, it’s gr8. And without any nasty calculation we can achieve nice result.

NOTE: This property is supported by : IE8+, Safari 3.1+ , Firefox 3+, Opera 9.6+, Chrome 2+

CSS3 and HTML 5 are capable of revolutionizing the way we design websites. you will be amazed what it is capable of. Stay with us for lots of upcoming articles with plenty of great tutorials, guidelines to get you started with CSS3 and HTML 5..

Comments are closed