Фотографии, используемые в качестве иллюстраций к статье или размещаемые в фотоальбоме, выглядят более аккуратно с обрамлением в виде тонкой рамки. Однако добавление рамки в графическом редакторе для каждого изображения займет немало времени, а каждый раз, когда потребуется изменить толщину или цвет рамки, вы окажетесь перед необходимостью повторять этот трудоемкий процесс заново. К счастью, CSS предлагает гораздо более легкий способ выполнения аналогичных задач.

Решение
Добавить рамку к изображению с помощью CSS предельно просто. Допустим, в документе на рис. 3.1 есть два изображения.

Рис. 3.1. Просмотр двух изображений в веб-браузере

Благодаря следующему правилу к обоим изображениям добавляется сплошная черная рамка толщиной в 1 пиксел:

img {
border-width: 0px;
border-style: solid;
border-color: #000000;
}

Это правило можно записать в сокращенной форме, например:

img {
border: 1px solid #000000;
}

На рис. 3.2. показан результат выполнения данного кода.

Рис. 3.2. С добавленной с помощью CSS рамкой изображение выглядит привлекательнее

Все это замечательно, но ваш документ ведь наверняка содержит изображения, которым черная рамка не нужна. В таком случае можно создать класс для изображений с рамками и применить его по отношению
к соответствующим элементам:

.imgborder {
border: 1px solid #000000;
}

<img src="food1.jpg" alt="приготовление пищи" class="imgborder" />

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

#album img {
border: 1px solid #000000;
}

<ul id=”album”>
<li><img src=”food1.jpg” alt=”приготовление пищи” /></li>
<li><img src=”food2.jpg” alt=”приготовление пищи” /></li>
</ul>

Такой прием избавляет от необходимости добавления атрибута с именем класса каждому отдельному изображению в контейнере.