17

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.

image with an offset border

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?

5
  • 2
    OP wants the effect similar to the displayed picture. @DarrenSweeney Commented Jul 10, 2017 at 6:09
  • Do you know the size of the image?
    – StudioTime
    Commented Jul 10, 2017 at 6:13
  • It's a responsive website and won't want to put restriction on size. Thank you though. I got the answer from Ori :) Commented Jul 10, 2017 at 6:37
  • 1
    Possible duplicate (accepted answer's 2nd option) stackoverflow.com/questions/19159977/…
    – Asons
    Commented Jul 10, 2017 at 8:00
  • Possible duplicate of Inner border over images with CSS?
    – TylerH
    Commented Jul 11, 2017 at 15:07

3 Answers 3

23

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>

0
12

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.

0
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.