Как сделать рамку для картинки в html

Чтобы создать рамку для картинки в HTML, можно использовать CSS свойство border.

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

<img src="my-image.jpg" alt="My Image" style="border: 1px solid black;">

В этом примере мы используем элемент img для отображения картинки и задаем ему свойство style, чтобы установить рамку. Стиль задает тип рамки (например, solid для сплошной рамки), а цвет определяет цвет рамки (например, black для черного цвета).

Рамку картинке задают CSS-свойством border:

<img class="photo" src="cat.jpg" alt="Кот">

Три значения: толщина, стиль и цвет. Стили линии: solid — сплошная, dashed — пунктир, dotted — точки, double — двойная.

Скруглённые углы и круг

.photo {
  border: 3px solid #0082ff;
  border-radius: 12px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
}

border-radius: 50% у квадратной картинки делает круг. object-fit: cover не даёт фото сплющиться.

Рамка с отступом от картинки

.photo {
  padding: 6px;
  border: 2px solid #ccc;
  background: #fff;
}

Между картинкой и рамкой появится белое поле, как у фотографии в паспарту.

Рамка, которая не меняет размер

border прибавляется к размеру картинки. Чтобы рамка не сдвигала соседние элементы, используйте outline или внутреннюю тень:

.photo {
  outline: 3px solid #0082ff;
  outline-offset: -3px;      /* рамка внутри картинки */
}

.photo-shadow {
  box-shadow: 0 0 0 3px #0082ff;
}

box-shadow повторяет скругление border-radius.

Рамка при наведении

.photo {
  border: 3px solid transparent;
  transition: border-color 0.2s;
}

.photo:hover {
  border-color: #0082ff;
}

Прозрачная рамка в обычном состоянии не даёт картинке прыгать при наведении.

Атрибут border в HTML

<img border="1"> устарел и не поддерживается в HTML5. Используйте CSS.

Оформление элементов разбирают в бесплатном курсе «Введение в HTML и CSS».