Рамка вокруг картинки

Свойство outline CSS

Свойство outline задаёт внешнюю границу для всех четырех сторон элемента одновременно. С помощью параметров этого свойства можно установить цвет, стиль, а так же толщину линий расположенных по периметру элемента. Главной отличительной особенностью свойства outline является то, что по сравнению со свойством border оно не оказывает влияния на его размеры и положение. Также стоит отметить, что с помощью свойства outline нельзя задать параметры для сторон по отдельности.


outline: 1px solid #777;

1px – толщина границы один пиксель

solid – сплошная линия

#777 – параметр задаёт цвет линии

Рамка для картинки CSS 

HTML

<div class="two-blocks">

  <div class="container">
    <div class="picture">
      <img src="/img/butterfly-01.png"
      alt="Бабочка на цветке">
    </div>
  </div>
  
  <div class="container">
    <div class="picture">
      <img src="/img/butterfly-02.png"
      alt="Бабочка">
    </div>
  </div>
  
</div>



CSS

.two-blocks{
    overflow: hidden;
    margin: 20px 0px;
}
.two-blocks .container {
    width: 50%;
    float: left;
}
.picture{	
    padding: 20px 0px;
    text-align: center;
}
.picture img {
    padding: 24px;
    background-color: #eee;
    outline: 1px solid #777;
}