Border inside the element with space with the edge

Question

How can I add a border to the element that's inside the element, and to have a space between it and the edge of the element? with CSS

something like this

Thank you

EDIT: Can't use the image as a background, I want it to be an img element

Answer 1

Try This...

here's the link: http://jsfiddle.net/aqm7kjbg/15/

HTML

<div>
 <img src="http://vignette1.wikia.nocookie.net/zimwiki/images/0/00/Gir.png/revision/latest?cb=20130712225209" width="200" />
 <span></span>
</div>

CSS

img{
  border: 5px solid gray;
}
span{
  position:relative;
  top:-200px;
  left:-188px;
  border: 5px solid red;
  padding:150px 80px 170px 80px;
}

Answer 2

You can use a container/wrapper around the image.

CSS

div {
    position: relative;
    display:inline-block;
}
div:before {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 0px 2px #fff;
    z-index:1;
    border: solid 10px transparent;
}

HTML

<div>
    <img src="https://i.sstatic.net/OGZXN.png" alt="image">
</div>

DEMO HERE

Answer 3

You may try something like this as of now.

.img-container {
  position: relative;
}
.border {
  height: 154px;
  width: 219px;
  border: 4px solid yellow;
  position: absolute;
  top: 8px;
  left: 8px;
}

<div class="img-container">
  <img src="https://i.sstatic.net/OGZXN.png">
  <div class="border"></div>
</div>

Answer 4

Make a div inside a div with the image as background. Give the div the Border and size you want. And because html and css sometimes works strange you maybe have to move the div over the image with negative margin. Hope that helps you.