Как добавить границу к изображению в CSS

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

Элемент <img> имеет атрибут, который не используется в версиях после HTML5. Поэтому мы рекомендуем использовать CSS свойство border вместо этого.

1. Создайте HTML

В разделе <body> создайте элемент <img> и вставьте ссылку изображения, которое должно использоваться.
Укажите название для изображения с помощью атрибута alt, который дает информацию касательно изображения, если пользователь по каким-то причинам не может просмотреть его.

<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">

2. Добавьте CSS

Добавьте style к элементу <img>.
Укажите width изображения.
Укажите ширину, стиль и цвет границы с помощью свойства border.

img {
width:650px;
border:1px solid black;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      width:650px;
      border:1px solid black;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
  </body>
</html>

Попробуйте сами!

Как добавить стиль к изображению границы

Для того, чтобы изменить цвет границы, можно добавить CSS свойство color. Если хотите получить двойную границу, необходимо добавить свойство padding к стилю изображения:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      width:650px;
      padding:1px;
      border:1px solid #021a40;
      }
    </style>
  </head>
  <body>
    <h2>Пример двойной границы</h2>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
  </body>
</html>

Попробуйте сами!

Возможно также получить двойную границу с разными цветами внутренней границы. Для этого добавьте свойство background-color.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      width:650px;
      padding:5px;
      border:8px solid #999999;
      background-color: #e6e6e6;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
  </body>
</html>

Попробуйте сами!

Можете также указать границы по отдельности. Для этого используйте CSS свойства border-bottom, border-top, border-left и border-right и для каждого задайте разные значения width. Рассмотрим пример, где свойство border-bottom установлено так, чтобы получился эффект баннера.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      width: 225px;
      border: 8px solid #ccc;
      border-bottom: 130px solid #ccc;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" alt="Nature">
  </body>
</html>

Попробуйте сами!

Для того, чтобы добавить стиль к границе изображения, добавьте свойство border-style к элементу <style>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      width:650px;
      padding:5px;
      border:12px #1c87c9;
      border-style: dashed;
      background-color: #eee;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
  </body>
</html>

Попробуйте сами!

Как задать углы и получить круглые границы

Для того, чтобы указать каждый угол границы, необходимо использовать CSS свойство border-radius. Свойство border-radius может иметь от одного до четырех значений. Рассмотрим пример с четырьмя значениями:

Запомните, что при использовании четырех значений они будут применены к углам в следующем порядке: top-left, top-right, bottom-right, bottom-left.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      width:650px;
      padding:2px;
      border:3px solid #1c87c9;
      border-radius: 15px 50px 800px 5px;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
  </body>
</html>

Попробуйте сами!

Вместо того, чтобы пытаться вложить изображение в другой элемент, или редактировать каждое изображение в photoshop для получения желаемого эффекта, вам необходимо установить свойство border-radius в значение 50% или 999em. Задайте одинаковые значения для width и height.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.imageborder {
      border-radius: 999em;
      width: 350px;
      height: 350px;
      padding: 5px;
      line-height: 0;
      border: 10px solid #000;
      background-color: #eee;
      }
      img {
      border-radius: 999em;
      height: 100%;
      width: 100%;	
      margin: 0;
      }
    </style>
  </head>
  <body>
    <h2>Пример круглой границы</h2>
    <div class="imageborder">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" height="350" width="350" alt="iceland" />
    </div>
  </body>
</html>

Попробуйте сами!