Blueprint CSS framework or any Grid system: fix for bordered divs

I've got some problems while trying to lay out my site. I'm using Blueprint Framework and it happens when I apply borders to my div. Since their width are controlled by span-XX (or grid-xx as I noticed in 960gs), the moment I apply borders to any div element I have it goes out of the grid as seen in these images

The only way I know to fix it is to change element's width, but then the framework's grid purpose finishes 'cause I won't have the span-XX classes anymore. Is there any other way to fix it?

If I understand it right, you have a span-24 or something similar and want to add a border to it, right? My preferred way of doing it is

<div class="span-24">
    <div class="box">here</div>
</div> 

and add the border to the box class for above snippet.

If you don't want to nest divs, you can create a few additional classes for bordered columns. I'm using 1px borders, so I created classes like:

.with-border-first {
  border: 1px solid red;
  margin-right: 8px;
}

.with-border {
  border: 1px solid red;
  margin-left: -1px; 
  margin-right: 9px;
}

.with-border-last {
  border: 1px solid red;
  margin-left: -2px;
}

There should be one more if you want borders around divs spanning all columns (eg. 24 in blueprint).

I then use those classes together with the spans, for example:

<div class="span-8 with-border-first">
...
</div>

<div class="span-8 with-border">
...
</div>

<div class="span-8 last with-border-last">
...
</div>