Image rendering issue under custom CSS

Product Support

AI-generated summary

The discussion is about an image rendering issue under custom CSS, where a1px black solid border on the right-side of an image is not displayed. robbie.morrison reported the issue and provided an example. Alteras suggested adding box-sizing: border-box to the CSS to fix the problem, which robbie.morrison confirmed worked. robbie.morrison then requested that the code be modified in a related post (add-border-to-image) to include this fix.

1

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?

3

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;
}
4

@Alteras That works. A quick round of applause!

5

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