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

Иногда при создании веб-страницы может быть необходимо добавить рамку к изображению без использования Photoshop или других редакторов. CSS поможет с этой задачей, добавляя к изображениям разноцветные рамки любой ширины и длины.

Можно создать обычную рамку вокруг изображения, используя CSS свойства border, padding и background.

1. Создайте HTML

  • Сначала создайте элемент <div> с названием класса "frame".
  • Укажите элемент <img> в <div>.
  • Задайте атрибут alt для изображения.
<div class="frame">
  <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
</div>

2. Создайте CSS

  • Задайте высоту и ширину рамки.
  • Укажите стиль, ширину и цвет границы с помощью сокращенного свойства border .
  • Задайте фоновый цвет.
  • Установите свойство margin со значением "auto" и padding с двумя значениями. Первое значение указывает верхнюю и нижнюю сторону, а второе указывает правую и левую сторону.
  • Задайте 100% для ширины и высоты изображения.
.frame {
width: 450px;
height: 350px;
border: 3px solid #ccc;
background: #eee; 
margin: auto;
padding: 15px 25px;
}
img {
width: 100%;
height: 100%;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .frame {
      width: 450px;
      height: 350px;
      border: 3px solid #ccc;
      background: #eee; 
      margin: auto;
      padding: 15px 25px;
      }
      img {
      width: 100%;
      height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="frame">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
    </div>
  </body>
</html>

Если хотите создать круглую рамку для изображения, задайте border-radius со значением 50% для всех сторон границы. Установите border-color, border-style, border-width, согласно вашим требованиям. Не забудьте задать overflow: hidden;, чтобы остальная часть изображения была невидимой.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .circle {
      border-color: #666 #1c87c9;
      border-image: none;
      border-radius: 50% 50% 50% 50%;
      border-style: solid;
      border-width: 25px;
      height: 200px;
      width: 200px;
      overflow: hidden;
      }
      img {
      height: 100%;
      width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="circle">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
    </div>
  </body>
</html>

Можно получить разные эффекты, меняя свойства border-radius и border-color. Например, если хотите получить квадратную рамку, необходимо для всех сторон задать border-radius 0.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .square{
      height: 200px;
      width: 200px;
      border-color: #666 #1c87c9;
      border-image: none;
      border-radius: 0 0 0 0;
      border-style: solid;
      border-width: 30px;
      }
      img {
      height: 100%;
      width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="square">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
    </div>
  </body>
</html>

Если хотите, чтобы указанные углы были скруглены, задайте border-radius со значением 50px для этих углов. В таком случае измените также width и height в соответствии с размером изображения.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .rounded-borders {
      height: 200px;
      width: 300px;
      border-color: #666 #8ebf42;
      border-image: none;
      border-radius: 50px 0 50px 0;
      border-style: solid;
      border-width: 20px;
      }
      img {
      height: 100%;
      width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="rounded-borders">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">
    </div>
  </body>
</html>

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

Возможно также добавить изображение в качестве границы. Для этого существует CSS свойство border-image, которое позволяет указать изображение, которое будет использовано как граница вокруг элемента.

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

  • stretch - изображение растягивается таким образом, чтобы заполнить область (значение по умолчанию)
  • repeat - изображение повторяется, чтобы заполнить область
  • round- изображение повторяется, чтобы заполнить область (если оно не заполняет область целым числом частей, масштаб изображения меняется так, чтобы заполнить)
  • space - изображение повторяется, чтобы заполнить область (если оно не заполняет область целым числом частей, дополнительное пространство распределяется между этими частями)

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      width: 80%;
      height: 300px;
      margin-bottom: 20px;
      background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
      background-size: cover;
      }
      img {
      width: 30%;
      height: 30%;
      }
      .border-one {
      border: 20px solid transparent;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 50 round;
      }
      .border-two {
      border: 20px solid transparent;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 35% round;
      }
      .border-three {
      border: 20px solid transparent;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 100% round;
      }
      .border-four {
      border: 20px solid transparent;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 20 stretch;
      }
    </style>
  </head>
  <body>
    <div class="border-one"></div>
    <div class="border-two"></div>
    <div class="border-three" ></div>
    <div class="border-four" ></div>
    <hr>
    <p>Оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border">
  </body>
</html>