Для додавання рамки до зображення застосовується стильова властивість border, яку слід додати до селектора img. Як значення одночасно вказується товщина рамки, її стиль та колір. Наприклад, для створення суцільної рамки завтовшки два пікселі червоного кольору необхідно записати border: 2px solid red. У прикладі 1 наведено повний код для додавання рамки до зображень на сторінці.
Приклад 1. Додавання рамки
<!DOCTYPE html>
<html>
<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.
<img> (приклад 2).
Приклад 2. Додавання рамки до вибраних зображень
<!DOCTYPE html>
<html>
<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. Зображення з рамкою