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: [imagem] Rounded Borders for images, oneboxes, blockquotes & more Theme component 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 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: And here is a sample image via standard upload: [The image shows an old, rusty electricity pylon with insulators and electrical apparatus. (Captioned by AI)] The AI image captioning does a pretty good job, I must say. TIA!

I use the “Generic BBCode wrapper” system for this: [imagem] Generic bbcode wrapper for theme components megaphoneAnnouncements 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: .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); } }

Here is the earlier HTML copy/pasted in .. no border evident .. and kinda small too: [photo showing derelict medium voltage power pole]

.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 :rofl: [The image displays a rope ladder with no visible border and some illegibility in the text provided. (Captioned by AI)]

[imagem] 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: div[data-theme-image-border] img { border: 1px solid gray; } and then use it in a post like this:

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 :smiley:

This #theme-component maybe of interest [imagem] Rounded Borders for images, oneboxes, blockquotes & more Theme component 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 support for: list ro…

@Heliosurge Tx. I had noted that component in my OP. But I will give it a try today too.

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.

@simonk tx, that works for me and is per‑image too.

Adicionar borda à imagem

Suporte ao Produto

robbie.morrison (Robbie Morrison) 26 Abril , 2025 08:48 8

@Heliosurge Vlw. Eu tinha notado esse componente na minha OP. Mas vou tentar hoje também.

Tópico		Respostas	Vistas
Adding custom class to img tag Feature	6	3368	20 Outubro , 2017
Rounded Borders for images, oneboxes, blockquotes & more Theme component	10	2406	30 Abril , 2025
Default theme discards CSS class for img tags. What now? Product Support css	2	574	20 Março , 2023
Image rendering issue under custom CSS Product Support	3	134	14 Maio , 2025
Set featured image without posting it in the topic Product Support	23	471	5 Agosto , 2025

Adicionar borda à imagem

Related topics