ВАШЕ ПРЕДЛОЖЕНИЕ.
Думаю,что теории предостаточно. Пришло время попрактиковаться. В качестве примера я заключу в яркую салатовую рамку с серым фоном одно из важных предложений этой статьи.

Важный момент! Встроенные стили отменно работают и не вредят HTML валидности сайта.
Для реализации такой же рамки необходимо обратиться к тегу <p> и заключить между ним ниже опубликованный код.
Так как в данном примере использовались встроенные css стили, считаю не менее важным ознакомить вас с каждым из них.
1. border – свойство, отвечающее за отображение рамки. Для упрощения поставленной задачи я не стал по отдельности прописывать каждое свойство - border-width (толщина границ рамки), border-color (цвет рамки html). А вместо этого немного сократил html код, прописав все свойства после двоеточия.
Для изменения внешнего вида рамки достаточно изменить значение solid. Существуют следующие границы рамок:
- ridge – рельефная.
- dotted – точечная.
- double – двойная.
- dashed – пунктирная.
- solid – сплошная.
2. padding – свойство, отвечающее за расстояние между рамкой и объектом, заключенным в нее.
При желании можно еще немного побаловаться со стилями добавив к числу команд заключенных между открывающимся и закрывающимся тегом <p> свойство margin. Таким способом можно осуществить отступы элементов, которые находятся снаружи рамки.
Чтобы изменить задний фон, достаточно прописать свойство background-color, указав после двоеточия код желанного цвета.
Рамка вокруг картинки html делается тем же самым способом, поэтому у вас с этим не должно возникнуть проблем. Единственное, что нужно знать новичку, это то, что для ее отображения свойства необходимо прописать в одиночном теге <img>.
Подытожив, можно сказать, что для того, чтобы сделать рамку вокруг картинки или текста достаточно открыть отображение html кода статьи и прописать в нем между определенными тегами специальные свойства.
Источник: https://stimylrosta.com.ua/verstka-sajta/html-putevoditel-dlya-novichkov/62-kak-sdelat-ramku-v-html-vokrug-teksta