CSS3 let's you do a lot of cool stuff, most of which add graphical enhancements like gradients and rounded corners, all of which are great. Lately however, I think my favorite new property is box-sizing.

There are two modes: content-box and border-box. content-box is default, and will calculate the true width for an element as width+padding+border. So if you have a child <div> with 100% width and 10px of padding, it will extend outside the parent <div>. Here's an example of content-box:

The parent<div> has a black background and the child has a red background with 50% opacity (rgba is another awesome new tool to use with css)

With border-box, the padding and border are included in the width of the element. So an element with width: 300px; and padding: 10px; will still have a width of 300px, rather than 320px. Here's the example from above using border-box:

This allows for more fluid specification of widths in a lot of instances. Say you need a textarea with width: 100%, you can add padding to it and not have to worry about it extending to be wider than what you really want. Before, I always had to set a fixed width, which obviously isn't ideal when developing a site you want to work in a variety of resolutions and devices (mobile).

The box-sizing property doesn't work in IE 7, but you can get around that with this.

Here's how you implement it:

box-sizing: border-box;
/* Firefox */
-moz-box-sizing: border-box;
/* Webkit */
-webkit-box-sizing: border-box;
/* IE */
-ms-box-sizing: border-box;
/* Opera */
-o-box-sizing: border-box;

Hope this helps you out like it has helped me!