Using box-sizing to create an inside border

Using box-sizing to create an inside border

I want to create an HTML table where each cell is clickable, and clicking
on a cell adds a border to the single div within the cell. I want that
div's border to exist entirely within the existing confines of the td that
contains it, without resizing the table or its cells at all. I can't seem
to make this happen correctly.
This previous question seems to address the same issue and points to some
articles about the box-sizing CSS options. I have a fiddle where I tried
to implement this without success: http://jsfiddle.net/YsAGh/3/.
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
....
</table>
Here's what currently happens. The border causes the containing td to grow
to accommodate the div's border.

How can I add the border to the div without it affecting the containing
table?