Как сделать внутреннюю рамку вокруг изображения?

[Illusiony]

Замучился уже искать.
У меня с начало создается таблица html, а далее динамически в каждую <td> я делаю бордюр всему <td> на jquery:

$(number_h_p).css({'border': '3px solid #4169E0'});

number_h_p-это id каждого <td> элемента
Далее загружаю картинки в каждый <td> 3 рисунка:

$(number_h_p).append(\"<a class='screenshot' href='' rel=''><img  src=''   /></a>\");
$(number_h_p).append(\"<a class='screenshot' href='''><img style='outline: 1px solid #FF0000' id='carta22' src=''   /></a>\");
$(number_h_p).append(\"<a class='screenshot' href='' rel=''><img  src=''   /></a>\");

outline, как оказалось не подходит, он все равно рисует рамку с внешней стороны, которая затирается рамкой всего <td>

Там у меня еще применяется дополнительный CSS, но уже не относится к этому вопросу.

В инете находил материалы через дополнительный див, но у меня так и ничего не получилось. Неужели нету простого способа?

[Illusiony]

Наконец то нашел:

style='outline: 3px solid #FF0000; outline-offset: -3px'

[CodeNOT]

а зачем гонять dom на js? когда можно на css тоже самое добавить? не?

[Illusiony]

Сообщение от CodeNOT

а зачем гонять dom на js? когда можно на css тоже самое добавить? не?

Если я правильно понял вопрос, то потому, что рамка у меня добавляется динамически уже в дальнейшей работе странички, при определенном ответе от сервере. Т.е. до наступления определенного события даже нет рисунков, которые нужно обрамлять и информации какие именно нужно из всех.

[CodeNOT]

ну как минимум в css можно написать так:

.screenshot img{
outline: 3px solid #FF0000;
outline-offset: -3px;
}

или добавить к приходящему изображению еще один класс, просто по скорости быстрее будет

[Illusiony]

Но мне не ко всем .screenshot img нужна эта рамка. Но, скорее я просто не доганяю, что Вы имеете ввиду(

[Alex11223]

ну сделайте .screenshot-with-border