Inner border over images with CSS?

by

You can do this without having an extra element or pseudo element:

http://cssdeck.com/labs/t6nd0h9p

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

IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline

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

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></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 */
}

More Related Contents:

  1. Remove white space below image [duplicate]
  2. Removing the image border in Chrome/IE9
  3. input type=”image” shows unwanted border in Chrome and broken link in IE7
  4. CSS Image Effects
  5. img src SVG changing the styles with CSS
  6. How to remove the border highlight on an input text element
  7. Any way to declare a size/partial border to a box?
  8. Is there any way to hover over one element and affect a different element? [duplicate]
  9. CSS Property Border-Color Not Working
  10. Control the dashed border stroke length and distance between strokes
  11. Preloading CSS Images
  12. Adjust list style image position?
  13. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  14. Hover effect : expand bottom border
  15. Bootstrap icons are loaded locally but not when online
  16. Text on image mouseover?
  17. Double border with different color [duplicate]
  18. image moves on hover – chrome opacity issue
  19. html, css – weird invisible margin below pictures
  20. Greyscale Background Css Images
  21. CSS: 100% width or height while keeping aspect ratio?
  22. Cross browser way to rotate image using CSS?
  23. Replace input type=file by an image
  24. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  25. Border within border CSS
  26. What is the difference between outline and border CSS properties?
  27. CSS border less than 1px [duplicate]
  28. Can I have different colored left and top borders in CSS?
  29. Creating space between an element and its border
  30. Contain an image within a div?

Leave a Comment