Image rendering issue under custom CSS

Following on from the topic below (I would have continued there but that topic is now closed):

The rendering of a custom CSS‑styled image file seems to have a small bug — namely the right‑side 1px black solid border is not displayed. Shrinking the image to 95% fixes the problem. The custom CSS is border : 1px solid black. The editing preview renders correctly — but the live version does not. An example can be found here. As I said, this is a small bug, but one probably worth fixing. TIA.

I can avoid this problem by also setting width : 98% but I don’t think I should have to do that? Any thoughts?

Looks like it just needs box-sizing to make the auto width account for the border.

.cooked img:not(.thumbnail, .ytp-thumbnail-image, .emoji), .d-editor-preview img:not(.thumbnail, .ytp-thumbnail-image, .emoji) {
  border: 1px solid #000;
  box-sizing: border-box;
}

@Alteras That works. A quick round of applause!

@ admins: perhaps the code in this post could be duly modified (or is that against protocols):