How can I add a 1px border to an image without a gap?

Question

I would like to draw a border around an image with no visible gap between the image and the border.

img{
  display: block;
  border: 1px solid black;
}

<img src="https://files.catbox.moe/r099uw.png">

Result of above snippet in Chrome (Version 84):

There is a small gap between the image and the border to the right and below the image.

The answer to this similar question suggests setting display: block on the image, but this does not seem to solve the problem in this case. Based on other answers I have also tried vertical-align:bottom, padding:0, margin: 0; adding width/height, but all to no avail. Increasing the border to 2px gets rid of the gap, but is not an ideal solution.

I tested the above snippet in Chrome, Firefox, and Microsoft Edge. It displays without a gap in Firefox, but with a gap in Chrome and Edge.

How can I create a bordered image that displays consistently without a gap across all platforms?

If you zoom in, you'll not see any white space, maybe it's because of [Antialiasing](https://stackoverflow.com/a/45303840/6670723) — Abhishek Pandey, Jul 21 '20 at 04:59
The image is 16x16, there wouldn't be any anti-aliasing. @AbhishekPandey — Chloe Dev, Jul 21 '20 at 05:00
I can see the problem when I zoom in. Can you use `outline` instead of `border`? — sol, Jul 21 '20 at 05:01
@ChloeDev it is antialiasing, if you increase width of image by `1px` the white space will be gone. — Abhishek Pandey, Jul 21 '20 at 05:07
@sol Using `outline` instead of `border` does seem to fix the issue. It is not a perfect solution, as the outline expands beyond the content box. This can be compensated for by offsetting the image position by 1px, although that feels a bit hacky. — Agargara, Jul 21 '20 at 05:12

Agargara · Answer 1 · 2020-07-21T05:04:27.720

It appears that adding box-sizing: border-box; as well as a specific height solves the problem in Chrome and Edge.

img{
  border: 1px solid black;
  height: 16px;
  box-sizing: border-box;
}

<img src="https://files.catbox.moe/r099uw.png">

If anybody knows a better solution, or why this is necessary, please let me know.

Edit: This solution is not perfect, as the gap can reappear depending on the position of the image. For example:

img{
  border: 1px solid black;
  height: 16px;
  width: 16px;
  box-sizing: border-box;
  position: relative;
  left: 1px;
}

span{
  border: 1px solid red;
}

<span>
<img src="https://files.catbox.moe/r099uw.png">
</span>

Result in Chrome (zoomed in for detail):

`box-sizing` determines whether the border and padding should be added to the width (`100% + border-width + padding`) or if the border and padding should be within the 100% width and height. As a Chromium user, I didn't experience the issue you do with Chrome. — Chloe Dev, Jul 21 '20 at 04:59

score 0 · Answer 2 · answered Jul 21 '20 at 08:43

You can fix this with css styling. This is what we can do, let's define a css class or id with desired width and height that you would like to have for image. Now use your image as background for defined div or class. Stroke/Border effect can be done by giving border to defined class or id. Once you're done you can adjust your image by making some changes to background-size. That will make you image zoom in or zoom out. So you can easily cover up the gap for any image. Here is the code

HTML :

<div id="image"> </div>

CSS :

#image {
display:inline-block;
width:30px;
height:30px;
border:1px solid #000;
background-image:url(TOn2E.png);
background-repeat:no-repeat;
background-position: center;
background-size: 150%
}

For adjusting image you can make changes to background-size in percentage.

score 0 · Answer 3 · answered Jul 21 '20 at 08:49

0

try this:

img {
   outline: 1px solid black;
}

<img src="https://files.catbox.moe/r099uw.png">

Also, if necessary, try to append outline-offset, like outline-offset: -1px;

answered Jul 21 '20 at 08:49

Vladyslav Topchii

40
5

How can I add a 1px border to an image without a gap?

3 Answers3