| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Встановити рамку навколо зображення заданого кольору і товщини.
Рішення
Для додавання рамки навколо зображення застосовується стильове властивість border, який слід додати до селектору IMG. В якості значення одночасно вказується товщина кордону, її стиль і колір. Наприклад, для створення суцільної рамки товщиною два пікселя червоного кольору необхідно записати img {border: 2px solid #ff0000;}. У прикладі 1 наведено повний код для додавання рамки до зображення на сторінці.
Приклад 1. Додавання рамки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Вінні-Пух</title>
<style>
img {
border: 3px solid #00a8e1;
}
</style>
</head>
<body>
<p><img src="images/vinni.jpg" alt="Вінні-Пух"></p>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Зображення з рамкою
В даному випадку рамка буде додаватися до всіх зображень на сторінці. Щоб встановити рамку тільки для вибраних малюнків, можна скористатися стильовим класом, вказуючи його для певних тегів <img> (приклад 2).
Приклад 2. Додавання рамки до вибраних малюнків
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Вінні-Пух</title>
<style>
.frame {
border: 3px solid #00a8e1;
}
</style>
</head>
<body>
<p><img src="images/vinni.jpg" alt="Вінні-Пух"></p>
<p><img src="images/vinni.jpg" alt="Вінні-Пух" class="frame></p>
</body>
</html>
В цьому прикладі введений стильової клас frame, який додається до вибраних малюнків з допомогою атрибута class.