Checkbox CSS question

Referencing this thread: http://www.gravityhelp.com/forums/topic/can-gf-use-images-to-make-form-selections

I have images for my checkbox labels and a border around the image when selected via this:
.

gform_wrapper ul.gfield_radio li input[type="radio"]:checked + label img {
height: auto;
border: 4px solid #aaa;
}

When I apply the border, it adds to the total size of the image which causes some issues as I use a responsive theme. I have tried a few things to address this but one of the ideas that looks cool is to apply a white border of the same size to the image before it is selected, so that when selected, the total image size does not change.

What will I call to style the image before it is selected?

I tried:
gform_wrapper ul.gfield_radio li input[type="radio"]:unchecked + label img but it did not seem to work?

Thanks!