How to define a thin white border inside an image

Question

I am trying to get a white border within the photo. Currently I have tried everything and come closest to the intended result with outline, only it is not possible to round it off.

Anyone have a solution for this?

img with outline as example

It's about the fine white line, which would only need to be rounded off.

Code:

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

Tip for other would-be solvers: Images don't have pseudo-elements. — isherwood, Aug 03 '21 at 15:06
However the [figure](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) element does and is semantically correct for a self contained `img` content with an optional `figcaption` should it be useful as an alternative workaround since `img` itself does indeed lack pseudo elements. Git 'r done. — Chris W., Aug 03 '21 at 15:10

score 1 · Answer 1 · answered Aug 03 '21 at 14:45

Use a pseudo-element on top of your image.

img {
  height: 75vh;
  width: auto;
  border-radius: 1rem;
  display: block;
  z-index: -1;
  position: relative;
}

div {
  display: inline-block;
  margin: 1em;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid white;
  border-radius: 14px;
}

<div>
  <img src="https://images.unsplash.com/photo-1625516838246-ff33acad73ec?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODAwMTMzNQ&ixlib=rb-1.2.1&q=85" alt="">
</div>

Seems like you'd just link [a dupe](https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge) for this solution. This isn't really what was requested, though. — isherwood, Aug 03 '21 at 14:47

score -1 · Answer 2 · answered Aug 03 '21 at 14:42

You can use two div blocks. External - as a container, with background image (or with img tag), and internal for line. It's a little bit verbose way, but very flexible

  .external {
    width: 100px;
    height: 100px;
    background-image: url('https://picsum.photos/536/354');
    background-size: cover;
    text-align: center;
    position: relative;
    border: 1px black solid;
    border-radius: 15px;
  }
  .internal {
    border-radius: 5px;
    border: 1px red solid;
    width: calc(90% - 2px);
    height: calc(90% - 2px);
    position: absolute;
    top: 5%;
    left: 5%;
  }

<div class="external">
  <div class="internal"></div>
</div>

The question isn't about putting borders on a div. If it was, there are probably a hundred duplicates of that on SO. — isherwood, Aug 03 '21 at 14:45

How to define a thin white border inside an image

2 Answers2