# 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:** 1
**Showing post:** 10

<div class="post-metadata">

### Author: ![simonk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simonk/32/247950_2.png) [@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")

</div>

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

```

---

_[View the full topic](https://meta.discourse.org/t/add-border-to-image/363471)._