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

Для добавления рамки к изображению применяется стилевое свойство border, которое следует добавить к селектору img. В качестве значения одновременно указывается толщина рамки, её стиль и цвет. Например, для создания сплошной рамки толщиной два пикселя красного цвета необходимо записать border: 2px solid red. В примере 1 приведён полный код для добавления рамки к изображениям на странице.

Пример 1. Добавление рамки

Код примера скопирован в буфер

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Рамка</title>
  <style>
   img {
    border: 3px solid green; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <p><img src="image/figure.jpg" alt="Винни-Пух"></p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Изображение с рамкой

Рис. 1. Изображение с рамкой

В данном случае рамка будет добавляться ко всем изображениям на странице. Чтобы установить рамку только для выбранных рисунков, можно воспользоваться стилевым классом, указывая его для определенных элементов <img> (пример 2).

Пример 2. Добавление рамки к избранным рисункам

Код примера скопирован в буфер

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Рамка</title>
  <style>
   .frame {
    border: 3px solid green; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <p>
   <img src="image/figure.jpg" alt="Винни-Пух">
   <img src="image/figure.jpg" alt="Винни-Пух" class="frame">
  </p>
 </body>
</html>

Результат данного примера показан на рис. 2. В данном примере введён стилевой класс frame, который добавляется к выбранным рисункам с помощью атрибута class.

Изображение с рамкой

Рис. 2. Изображение с рамкой

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

См. также