Designing with CSS – Box Sizing

We have already discussed some great new properties offered by CSS3. Starting with the previous article we focused on some of the most significant ways you can enhance user interface features in CSS3, and we will continue the same in this post and next few articles.

The CSS3 box-sizing property allows you to determine whether you want an element to render it’s borders and padding within its specified width, or outside of it.

By default, box-sizing property is set to content-box. With that set, it calculates width and height as specified by CSS 2.1, adding the border-width and border-height and the padding to the size of the box.

By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and place the border and padding inside the box. This is the box model used by Internet Explorer when the document is not in standards-compliant mode.

Firefox has this feature prefixed with -moz-, resulting in -moz-box-sizing. Safari 3 / WebKit uses -webkit-box-sizing. Chrome and Opera just accepts plain box-sizing.

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

You choose whether you want a border box or content box. The code will be generated.

Your Codes:

Border Box

box-sizing: border-box;
-moz-box-sizing: border-box;  /* Firefox */
-webkit-box-sizing: border-box;  /* WebKit */

Content Box

box-sizing: content-box;
-moz-box-sizing: content-box;  /* Firefox */
-webkit-box-sizing: content-box;  /* WebKit */

If your browser supports CSS3 box-sizing property, I give you below three examples.

Examples of CSS3 User Interface Box Sizing

Example 1 (Box Sizing: Border Box)
Padding and border do not make this box wider.

CSS Code:

width: 400px;
padding: 20px;
border: 3px ridge silver;
height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Example 2 (Box Sizing: Content Box)
Padding and border make this box wider.

CSS Code:

width: 400px;
padding: 10px;
border: 3px ridge gold;
height: 150px;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;

Example 3 (Box Sizing: Border Box)
Using box-sizing to proportionately share space.

This example uses box-sizing to proportionately horizontally split two divs with fixed size borders inside a div container, which would otherwise require additional markup.

CSS Code:

float: left;
width: 40%; /* width: 60%;  right box */
padding: 10px;
border: 3px ridge silver; /* border: 3px ridge gold; right box */ 
height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;