Add Internal Borders but not external - html

Question

I have a grid of square images.
I want to put a border on the inside of each of these but not on the outside of the whole box, as in the image below:
Here's the html setup.
<div class="grid-wrapper">
<ul>
<li><img src="[image url]" /></li>
</ul>
</div>
And the CSS
.grid-wrapper {
margin: 0 auto;
}
.grid-wrapper ul {
list-style: none;
display: block;
}
.grid-wrapper ul li {
padding: 5px;
border: 1px solid #F1F1F1;
}
I've tried putting the border all the way round each of the li elements and then adding a white border on the grid-wrapper to put it over the outer borders but that didn't work.
How can I get this without manually setting each one's border-left/border-bottom etc. The squares are dynamically pulled from the database so each one doesn't have a particular class, they're all identical.
UPDATE
The grid is fluid. When you pull the browser window open, it adds more to the top row (if there's room) and less when you pull the browser window inward. There's no fixed number of icons.

Answer 1

You didn't specify what you want to happen when there's a ragged row at the bottom, so I'm not sure if this meets your requirement fully, but this example may accomplish what you need.
http://jsfiddle.net/52LRd/
It works by setting a border on the bottom and left each of each element, then by budging the ul inside the wrapper 1px up and left, making those edges invisible.
.grid-wrapper {
float: left;
margin: 0 auto;
overflow: hidden;
}
.grid-wrapper ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
position: relative;
top: 1px;
right: 1px;
}
.grid-wrapper ul li {
float: left;
padding: 10px;
border-bottom: 1px solid #F1F1F1;
border-left: 1px solid #F1F1F1;
}
This gets you out of having to try to figure out which list items are in the top row, bottom row, left column, and right column, which would require JavaScript.