How to define a thin white border inside an image

user_11212539 0
Viewed 161

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;
}
outline css
2 Answers

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>

user_28020400

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>

user_45724270
Related