How to add borders to an image in Markdown?

Prev Next

Plans supporting this feature: Professional Business Enterprise

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

With border

your-image-description

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?