# Add border to image
**URL:** https://meta.discourse.org/t/add-border-to-image/363471
**Category:** Support
**Created:** [April 25, 2025, 3:15pm UTC](https://meta.discourse.org/t/add-border-to-image/363471 "2025-04-25T15:15:38Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [April 25, 2025, 3:15pm UTC](https://meta.discourse.org/t/add-border-to-image/363471/1 "2025-04-25T15:15:38Z")
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:
> [@Rounded Borders for images, oneboxes, blockquotes & more](https://meta.discourse.org/t/rounded-borders-for-images-oneboxes-blockquotes-more/232044):
>
> Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics. Allows change of the following settings set image rounding intensity set image border width set image border color set onebox rounding intensity change onebox border width change onebox border color change onebox background color set rounding blockquotes intensity remove left border from blockquotes set ‘staff color’ rounding intensity [topic thumbnail](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602) support for: list ro…
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:
```html
```
And here is a sample image via standard upload:
The AI image captioning does a pretty good job, I must say. TIA!
---
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [April 25, 2025, 3:26pm UTC](https://meta.discourse.org/t/add-border-to-image/363471/3 "2025-04-25T15:26:27Z")
Here is the earlier HTML copy/pasted in .. no border evident .. and kinda small too:
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [April 25, 2025, 3:39pm UTC](https://meta.discourse.org/t/add-border-to-image/363471/4 "2025-04-25T15:39:14Z")
```plaintext
.cooked img:not(.thumbnail,.ytp-thumbnail-image,.emoji), .d-editor-preview img:not(.thumbnail,.ytp-thumbnail-image,.emoji) {
border: 4px solid red;
}
```
devtools hacked CSS … YMMV 🤣
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 25, 2025, 3:46pm UTC](https://meta.discourse.org/t/add-border-to-image/363471/5 "2025-04-25T15:46:27Z")
> [@robbie.morrison](#):
>
> ` style="border: 1px solid gray">`
custom CSS gets stripped out of posts because someone could do something like `border: 1000px solid gray` and make the whole topic unreadable
You need to add some CSS to a theme or a theme component to do this, no great way around it. You _can_ make it optional on an image-by-image basis though.
So for example, you can add this CSS to a theme:
```css
div[data-theme-image-border] img {
border: 1px solid gray;
}
```
and then use it in a post like this:
```html
```
---
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [April 25, 2025, 4:34pm UTC](https://meta.discourse.org/t/add-border-to-image/363471/6 "2025-04-25T16:34:29Z")
Many thanks. Some follow‑up.
@merefield: your example worked when added as follows:
☰ ▸ Admin ▸ Customize ▸ Themes = Default ▸ Edit CSS/HTML ▸ Desktop ▸ CSS
@awesomerobot: I could not get your code to work, despite trying some variations.
Note that first example is site‑wide and the second example is (or rather should be) per‑image.
Any further suggestion welcome. The site‑wide solution is acceptable but a per‑image application is probably preferable.
PS: the AI captioning is deteriorating with every iteration 😃
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [April 26, 2025, 8:27am UTC](https://meta.discourse.org/t/add-border-to-image/363471/7 "2025-04-26T08:27:31Z")
This #Customization > Theme component maybe of interest
> [@Rounded Borders for images, oneboxes, blockquotes & more](https://meta.discourse.org/t/rounded-borders-for-images-oneboxes-blockquotes-more/232044):
>
> Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics. Allows change of the following settings set image rounding intensity set image border width set image border color set onebox rounding intensity change onebox border width change onebox border color change onebox background color set rounding blockquotes intensity remove left border from blockquotes set ‘staff color’ rounding intensity [topic thumbnail](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602) support for: list ro…
---
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [April 26, 2025, 8:48am UTC](https://meta.discourse.org/t/add-border-to-image/363471/8 "2025-04-26T08:48:20Z")
@Heliosurge Tx. I had noted that component in my OP. But I will give it a try today too.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [April 26, 2025, 9:46am UTC](https://meta.discourse.org/t/add-border-to-image/363471/9 "2025-04-26T09:46:35Z")
My bad skimmed topic and missed that. But as others mentioned here you would create a custom component. The benefit though of using an existing component is potentially it is already maintained.
However TC are also handy to study and use parts of the code in your own custom works.
---
### Author:  [@simonk](https://meta.discourse.org/u/simonk)
#### Post date: [April 28, 2025, 2:50pm UTC](https://meta.discourse.org/t/add-border-to-image/363471/10 "2025-04-28T14:50:04Z")
I use the “Generic BBCode wrapper” system for this:
> [@Generic bbcode wrapper for theme components](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516):
>
> I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…
I put `[wrap=border]...[/wrap]` around the image that I want to add a border to, along with this CSS:
```css
.d-wrap[data-wrap="border"] {
> img, > p > img, .lightbox, .image-wrapper img {
border: 1px solid #555;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
}
```
---
### Author:  [@robbie.morrison](https://meta.discourse.org/u/robbie.morrison)
#### Post date: [April 28, 2025, 3:00pm UTC](https://meta.discourse.org/t/add-border-to-image/363471/11 "2025-04-28T15:00:38Z")
@simonk tx, that works for me and is per‑image too.
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [April 29, 2025, 6:21pm UTC](https://meta.discourse.org/t/add-border-to-image/363471/12 "2025-04-29T18:21:24Z")
A post was merged into an existing topic: [Rounded Borders for images, oneboxes, blockquotes & more](https://meta.discourse.org/t/rounded-borders-for-images-oneboxes-blockquotes-more/232044/7)
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [April 29, 2025, 6:21pm UTC](https://meta.discourse.org/t/add-border-to-image/363471/13 "2025-04-29T18:21:35Z")