Offset a border over an image - html

Question

I'm trying to create exactly like what is shown in the picture below. I have tried other methods using outline and offset method too but I could't figure out how to go on about doing this.
Here's the JSFiddle:
img {
border: 4px solid green;
}
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
How do I do to get this offset border over the image?

Answer 1

Wrap the image with an inline block, and set an absolutely positioned pseudo-element as the border:
body {
padding: 50px 0 0 80px;
}
.imageContainer {
display: inline-block;
position: relative;
}
.imageContainer::before {
position: absolute;
top: -5%;
left: -15%;
width: 100%;
height: 100%;
border: 4px solid #77B244;
content: '';
}
<div class="imageContainer">
<img src="https://cdn.pixabay.com/photo/2013/07/31/12/25/cat-169095_960_720.jpg" alt="services_gas_oil" border="0">
</div>

Answer 2

A simpler way would be to use a combination of border, outline and a negative outline-offset. Here is an example :
img{
outline:4px solid #77B244;
outline-offset:-100px;
border:50px solid transparent;
border-width:150px 50px 50px 150px;
margin:-75px 0 0 -75px;
}
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
This prevents the use of a parent element and a pseudo element.

Answer 3

Another possibility would be to wrap image inside a div element having a border and move image inside container towards left and bottom.
As from Documentation:
A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.
We will need to wrap img inside an element like div i.e:
<div class="image-holder">
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" >
</div>
We will apply border to the container and move image from its normal position with following CSS:
.image-holder img {
position: relative;
z-index: -1;
left: 40px;
top: 40px;
}
.image-holder {
border: 7px solid #76af46;
display: inline-block;
vertical-align: top;
}
.image-holder img {
position: relative;
z-index: -1;
left: 40px;
top: 40px;
}
<div class="image-holder">
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>
Alternatively, we can use CSS3 translate() as well.
.image-holder img {
transform: translate(40px, 40px);
position: relative;
z-index: -1;
}
.image-holder {
border: 7px solid #76af46;
display: inline-block;
vertical-align: top;
}
.image-holder img {
transform: translate(40px, 40px);
position: relative;
z-index: -1;
}
<div class="image-holder">
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>