[css] Twitter Bootstrap - borders

I just started using Twitter Bootstrap, and I have a question about how to best add a border to a parent element?

for instance, if I have

 <div class="main-area span12">
    <div class="row">
       <div class="span9">
            //Maybe some description text
       </div>
       <div class="span3">
            //Maybe a button or something
       </div>
    </div>
 </div>

If I apply a border like so:

.main-area {
    border: 1px solid #ccc;
}

The grid system will break and kick span3 down to the next row because of the added width of the border......Is there a good way to be able to add things like borders or padding to the parent <div>s like this?

Another solution I ran across tonight, which worked for my needs, was to add box-sizing attributes:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

These attributes force the border to be part of the box model's width and height and correct the issue as well.

According to caniuse.com » box-sizing, box-sizing is supported in IE8+.

If you're using LESS or Sass there is a Bootstrap mixin for this.

LESS:

.box-sizing(border-box);

Sass:

@include box-sizing(border-box);