Add frame/border to image without changing image size

Question

I want to add a frame to my image. But with borders, the images shrink.

This is my code:

.img-border {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
}

<div class="border border-black img-border">
</div>
<img class="img-fluid shadow bg-white" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/a3efe622972119.5631b3f61e688.gif">

But I feel this is very wrong.

Does this answer your question? [CSS Inset Borders](https://stackoverflow.com/questions/8452739/css-inset-borders) — segFault, Apr 26 '20 at 12:25

score 0 · Answer 1 · answered Apr 25 '20 at 14:54

Two solutions:

Use an inset box-shadow with 0 blur and 1px spread. You could do this on the img itself to avoid the wrapper element. Shadows don't affect layout like borders do.
Use the png as a background-image and set the background-origin to border-box. Give that same element the border. background-origin controls where the background starts drawing. (MDN documentation for background-origin)

Add frame/border to image without changing image size

1 Answers1