Тень вставки CSS в ячейке таблицы неправильно выровнена

Так что, вероятно, есть простой ответ на этот вопрос, но я не могу заставить мою тень вставки CSS корректно работать с ячейкой таблицы. У меня есть следующие правила CSS:

table { 
    border: 1px solid #aaa; 
}
table th, td { 
    width: 76px; 
    height: 50px; 
    vertical-align: middle; 
    text-align: center;
}
tr { 
    border: 1px solid #aaa; 
}
td.color {
    -moz-box-shadow:inset 0 0 10px 0 #222;
    -webkit-box-shadow:inset 0 0 10px 0 #222;
    box-shadow:inset 0 0 10px 0 #222;
    border: 1px solid #000;
}
td.red { ... }
td.green { ... }

Итак, я пытаюсь добавить классы .color и .red , .green и т. Д. В определенные ячейки. со вставленной тенью, чтобы они выглядели с отступом в строке таблицы. По какой-то причине внутренняя тень смещена на 1 пиксель.

Я разместил изображение проблемы здесь:

В результате у нижнего и правого краев просвечивает 1 пиксель фона.

Есть идеи? Спасибо!

-Nate