# Image rendering issue under custom CSS

**URL:** https://meta.discourse.org/t/image-rendering-issue-under-custom-css/366000
**Category:** Support
**Created:** [May 13, 2025, 9:59pm UTC](https://meta.discourse.org/t/image-rendering-issue-under-custom-css/366000 "2025-05-13T21:59:20Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![robbie.morrison](https://avatars.discourse-cdn.com/v4/letter/r/c5a1d2/32.png) [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [May 13, 2025, 9:59pm UTC](https://meta.discourse.org/t/image-rendering-issue-under-custom-css/366000/1 "2025-05-13T21:59:20Z")

</div>

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

> [@Add border to image](https://meta.discourse.org/t/add-border-to-image/363471):
>
> Hello all Can I add a thin border to a JPG image without resorting to a theme component? I want to keep this simple and avoid, for instance, this component: I have tried every variation of the img tag that I can think of. The only thing that worked was to embed the image in a kbd tag, but that is a bit odd. This is really what I want to write: \<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg" alt="photo showing derelict medium voltage power pole" width="75%" style="border: 1px …

The rendering of a&nbsp;custom CSS‑styled image file seems to have a small bug&nbsp;— 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&nbsp;— but the live version does not. An example can be found [here](https://forum.openmod.org/t/3102/6). As I&nbsp;said, this is a&nbsp;small bug, but one probably worth fixing. TIA.

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

---

<div class="post-metadata">

### Author: ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/179824_2.png) [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [May 14, 2025, 12:39am UTC](https://meta.discourse.org/t/image-rendering-issue-under-custom-css/366000/3 "2025-05-14T00:39:05Z")

</div>

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

```css
.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;
}

```

---

<div class="post-metadata">

### Author: ![robbie.morrison](https://avatars.discourse-cdn.com/v4/letter/r/c5a1d2/32.png) [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [May 14, 2025, 7:01am UTC](https://meta.discourse.org/t/image-rendering-issue-under-custom-css/366000/4 "2025-05-14T07:01:48Z")

</div>

@Alteras That works. A quick round of applause!

---

<div class="post-metadata">

### Author: ![robbie.morrison](https://avatars.discourse-cdn.com/v4/letter/r/c5a1d2/32.png) [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [May 14, 2025, 7:07am UTC](https://meta.discourse.org/t/image-rendering-issue-under-custom-css/366000/5 "2025-05-14T07:07:07Z")

</div>

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

- [https://meta.discourse.org/t/add-border-to-image/363471/3](https://meta.discourse.org/t/add-border-to-image/363471/3)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [June 13, 2025, 7:08am UTC](https://meta.discourse.org/t/image-rendering-issue-under-custom-css/366000/6 "2025-06-13T07:08:04Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.