Pages

Showing posts with label outline css. Show all posts
Showing posts with label outline css. Show all posts

Inner Border in Images Using css


Inner Border or outline in Images Using CSS/HTML




img {
  outline: 1px solid white;
  outline-offset: -4px;

}
IE9&10 do not support the outline-offset property, but otherwise support is good:

Alternate solution that doesn't require knowing the dimensions of the image:

<div class="ie-container"><img src="" /></div>

div.ie-container {
  display: inline-block;
  position: relative;
}

div.ie-container:before {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 1px solid white;
}

img {
  vertical-align: middle; /* optional */
}

Popular Posts