Simple way to add borders to images #4488

New Issue

OVERLORD · 2026-02-05T08:59:33+03:00

OVERLORD commented

2026-02-05 08:59:33 +03:00

Originally created by @lmartin-ah on GitHub (Feb 26, 2024).

Describe the feature you'd like

I would like a quick way (a single button or dropdown menu) that allows us to add a border (or shadow) to embedded an image.

for example in word I can easily turn this:

into this:

which is much easier to view

Describe the benefits this would bring to existing BookStack users

We use bookstack a lot for sharing how to guides these often use a lot of screenshots from windows.

These screenshots often contain a lot of white that blurs into the white background of the page. A border or shadow defines where the edges of the picture are and can help distinguish between multiple pictures in a row.

Can the goal of this request already be achieved via other means?

It is possible to edit each image and manually add a border but this is very time consuming if there are a lot of images.

Adding a single cell table and putting the image in that works a little bit. The problem is the cell stretches the entire width of the page which is good if the image matches the page width but is bad otherwise.

Have you searched for an existing open/closed issue?

I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

1 to 5 years

Additional context

No response

Originally created by @lmartin-ah on GitHub (Feb 26, 2024). ### Describe the feature you'd like I would like a quick way (a single button or dropdown menu) that allows us to add a border (or shadow) to embedded an image. for example in word I can easily turn this: <img width="443" alt="image" src="https://github.com/BookStackApp/BookStack/assets/125663930/e9958056-d961-4444-bf39-655b7a596e28"> into this: <img width="443" alt="image" src="https://github.com/BookStackApp/BookStack/assets/125663930/99b1168b-de15-49c5-9d43-93743aca7503"> which is much easier to view ### Describe the benefits this would bring to existing BookStack users We use bookstack a lot for sharing how to guides these often use a lot of screenshots from windows. These screenshots often contain a lot of white that blurs into the white background of the page. A border or shadow defines where the edges of the picture are and can help distinguish between multiple pictures in a row. ### Can the goal of this request already be achieved via other means? It is possible to edit each image and manually add a border but this is very time consuming if there are a lot of images. Adding a single cell table and putting the image in that works a little bit. The problem is the cell stretches the entire width of the page which is good if the image matches the page width but is bad otherwise. ### Have you searched for an existing open/closed issue? - [X] I have searched for existing issues and none cover my fundamental request ### How long have you been using BookStack? 1 to 5 years ### Additional context _No response_

OVERLORD added the 🔨 Feature Request label 2026-02-05 08:59:33 +03:00

OVERLORD closed this issue

2026-02-05 08:59:39 +03:00

OVERLORD commented

2026-02-05 08:59:42 +03:00

@ssddanbrown commented on GitHub (Feb 26, 2024):

Hi @lmartin-ah,
There are ways to do this via some CSS in the "Custom HTML Head Content" customization setting.
Would you prefer:

This to be added to all page content images?
This to be added to images of pages with a specific tag?
This to be added to specific images, controlled via alt text?

@ssddanbrown commented on GitHub (Feb 26, 2024): Hi @lmartin-ah, There are ways to do this via some CSS in the "Custom HTML Head Content" customization setting. Would you prefer: - This to be added to all page content images? - This to be added to images of pages with a specific tag? - This to be added to specific images, controlled via alt text?

OVERLORD commented

2026-02-05 08:59:46 +03:00

@lmartin-ah commented on GitHub (Feb 26, 2024):

Wow thanks, for the super quick reply and all the work you put in to this awesome product.

The alt text version for specific images would be my preference.

Thank you.

@lmartin-ah commented on GitHub (Feb 26, 2024): Wow thanks, for the super quick reply and all the work you put in to this awesome product. The alt text version for specific images would be my preference. Thank you.

OVERLORD commented

2026-02-05 08:59:51 +03:00

@ssddanbrown commented on GitHub (Feb 26, 2024):

@lmartin-ah Okay, add this to your "Custom HTML Head Content" customization setting:

<style>
  .page-content img[alt*="bordered"] {
    box-shadow: 2px 2px 6px 3px rgba(0, 0, 0, 0.5);
  }
</style>

Then, just add bordered (case sensitive) to the alt text of an image, via clicking on the image then clicking the image icon to open the image options menu:

That image will then gain a border.
I've tried to emulate a similar kind of drop-shadow as per your example screenshots.

@ssddanbrown commented on GitHub (Feb 26, 2024): @lmartin-ah Okay, add this to your "Custom HTML Head Content" customization setting: ```html <style> .page-content img[alt*="bordered"] { box-shadow: 2px 2px 6px 3px rgba(0, 0, 0, 0.5); } </style> ``` Then, just add `bordered` (case sensitive) to the alt text of an image, via clicking on the image then clicking the image icon to open the image options menu: <img width="400" src="https://github.com/BookStackApp/BookStack/assets/8343178/6a81ab7f-01aa-4825-8fba-11bc57a35837"> That image will then gain a border. I've tried to emulate a similar kind of drop-shadow as per your example screenshots.

OVERLORD commented

2026-02-05 08:59:52 +03:00

@lmartin-ah commented on GitHub (Feb 26, 2024):

Wow, awesome solution. Thank you so much.

@lmartin-ah commented on GitHub (Feb 26, 2024): Wow, awesome solution. Thank you so much.

OVERLORD commented

2026-02-05 08:59:55 +03:00

@ssddanbrown commented on GitHub (Feb 27, 2024):

No worries, glad to hear that works for you.
I'll therefore close this off, since there's been little additional request for this in the last 8 years, and it's easy to add workarounds for like above, so I don't feel it's worth maintaining a more integrated solution.

@ssddanbrown commented on GitHub (Feb 27, 2024): No worries, glad to hear that works for you. I'll therefore close this off, since there's been little additional request for this in the last 8 years, and it's easy to add workarounds for like above, so I don't feel it's worth maintaining a more integrated solution.

OVERLORD commented

2026-02-05 09:00:01 +03:00

@szabeszg commented on GitHub (Feb 27, 2024):

there's been little additional request for this in the last 8 years

Adding blur around images in a similar way discussed here was the very first thing I did after installing BookStack for the first time.

BookStack is for writing documentation which often involves displaying screenshots. Most screenshots blend into the page without adding some border like decoration around them.

I think BookStack should support (optionally) such a feature somehow, for both light and dark mode themes.

@szabeszg commented on GitHub (Feb 27, 2024): > there's been little additional request for this in the last 8 years Adding blur around images in a similar way discussed here was the very first thing I did after installing BookStack for the first time. BookStack is for writing documentation which often involves displaying screenshots. Most screenshots blend into the page without adding some border like decoration around them. I think BookStack should support (optionally) such a feature somehow, for both light and dark mode themes.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#4488