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

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


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

Изображение в markdown формате не имеет возможности добавить стили оформления, поэтому здесь это невозможно. Ты можешь добавить специальную команду в тег img, как в коде ниже:

  • <img src=”/images/picture.jpg” border=”5px solid red”/>

Но увы, и это не сработает. Рамка отображаться не будет.

В VScode - работает.

Тем не менее решение есть и довольно необычное.

Найдено на StackOverflow.

Все, что нужно сделать, это окружить тег image другим тегом - kbd:

<kbd>
  <img src="/images/picture.jpg" border="15px solid red"/>
</kbd>

Чётко! 😎