The Markdown editor does not have a built-in way to add borders to images. The workaround is to use the HTML <img> tag with the border CSS property inside the style attribute, which Document360's Markdown editor renders correctly.
When to use image borders
- Screenshots with white or light backgrounds — a border creates a visible edge between the image and the page, preventing the image from blending into the background.
- UI screenshots or diagrams — a thin border gives the image a clean, contained appearance, which works well for technical documentation.
- Grouping or emphasis — a border visually separates an image from surrounding content and signals that it is a distinct element worth examining.
Use borders sparingly. Applying them to every image reduces their effect and can make articles feel cluttered.
This technique only works in the Markdown editor. In the WYSIWYG editor, use the border toggle in the image settings panel instead.
Understanding the border property
The border CSS shorthand sets three values in this order:
| Value | What it controls | Example |
|---|---|---|
| Width | Thickness of the border line | 2px |
| Style | Appearance of the border line | solid, dashed, dotted |
| Colour | Colour of the border — any CSS colour name or hex code | grey, #000000 |
Quick reference
Replace YOUR_IMAGE_URL, YOUR_ALT_TEXT, and the border values with your requirements.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
To customise the border, adjust the width, style, and colour:
<!-- Thicker black border -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 4px solid black;">
<!-- Dashed blue border -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px dashed blue;">
Grey is one of the most commonly used border colours alongside black, as it works well against both light and dark backgrounds. Replace grey with any valid CSS colour name (for example, blue, green, yellow) or a hex code to match your design.
How to add a border to an image in Markdown
- Open the desired article in the Knowledge Base portal.
- Paste the snippet below at the location where you want the image to appear.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="border: 2px solid grey;">
- Replace
YOUR_IMAGE_URLwith the URL of your image. - Replace
YOUR_ALT_TEXTwith a short description of the image for accessibility. - Adjust the border width, style, and colour as needed — see the border property reference table above.
Outcome
Without border
With border
You can combine a border with a shadow on the same image using both CSS properties in the style attribute. See How to add shadows to an image in Markdown for the shadow syntax.