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

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

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;
}