---
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: 2025-05-13T08:28:47Z
published: 2025-05-13T08:28:47Z
---

> ## 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

Markdown doesn't have a built-in way to add borders to images, but you can use HTML tags within Markdown to achieve this effect.

### Workaround

#### Sample code

```
<img src= "image.jpg" alt="your-image-description" style="border: 2px solid grey;">
```

> Replace the `image.jpg` with your image URL and add the alt text for your image in place of "your-image-description".

You can adjust the border width, style, and color by modifying the style attribute as desired.

In the above sample code, we use the `style` attribute to add the following:

- Border width is **2-pixel**.
- Border style is **solid**.
- Color of the border is set to **grey**.

          <nor class="fa-regular fa-circle-exclamation" data-tomark-pass=""></nor> NOTE

          

You can change the shadow color of images. Just replace **grey** with your desired color name. For example, blue, green, yellow, and more. Grey has been used in the example because it is the most commonly used border color next to **black**.

### Outcome

#### Without border

![1_Screenshot-without_shadow_Featured_image-Health_check_metrics.png](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

![your-image-description](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-with_shadow_Featured_image-Health_check_metrics%281%29.png)

          <nor class="fa-regular fa-circle-exclamation" data-tomark-pass=""></nor> NOTE

          

You can also add a shadow to the image using HTML code snippets. Check this article for more information: [How to add shadows to an image in Markdown?](/help/docs/how-to-add-shadows-to-an-image-in-markdown)

## 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)