---
title: "How to add borders to an image in Markdown"
slug: "how-to-add-borders-to-an-image-in-markdown"
description: "Format you images by adding borders to them in the Markdown editor using this simple Hack. "
tags: ["Images", "Customization"]
updated: 2026-06-20T09:03:29Z
published: 2026-06-20T09:03:29Z
canonical: "docs.document360.com/how-to-add-borders-to-an-image-in-markdown"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to add borders to an image in Markdown

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.

 NOTE

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;">
```

 NOTE

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

1. Open the desired article in the Knowledge Base portal.
2. 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;">
```

1. Replace `YOUR_IMAGE_URL` with the URL of your image.
2. Replace `YOUR_ALT_TEXT` with a short description of the image for accessibility.
3. Adjust the border width, style, and colour as needed — see the [border property reference table](/docs/how-to-add-borders-to-an-image-in-markdown#understanding-the-border-property) above.

---

## Outcome

### Without border

![Screenshot of a health check metrics dashboard without a border applied.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/1_Screenshot-without_shadow_Featured_image-Health_check_metrics%281%29.png)

### With border

![Screenshot of a health check metrics dashboard with a 2-pixel solid grey border applied.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-with_shadow_Featured_image-Health_check_metrics%281%29.png)

 NOTE

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](/help/docs/how-to-add-shadows-to-an-image-in-markdown) for the shadow syntax.

## Related

- [How to align the image in Markdown](/how-to-align-the-image-in-markdown.md)
- [How to add accordion in Markdown](/how-to-add-accordion-in-markdown.md)
- [How to add extra space in Markdown](/how-to-add-extra-space-in-markdown.md)
- [How to center align the text in Markdown](/how-to-center-align-the-text-in-markdown.md)
- [How to add shadows to an image in Markdown](/how-to-add-shadows-to-an-image-in-markdown.md)
- [How to change the color of the text in Markdown](/how-to-change-the-color-of-the-text-in-markdown.md)