Markdown Toolbox Logo Markdown Toolbox

How do I Add an Image Border in Markdown?

Friday, December 29, 2023

Adding borders to images in Markdown documents involves using a combination of Markdown and HTML. Since standard Markdown doesn't support image styling, HTML tags are used to apply additional CSS styles.

Here's how you can add a border to an image:

  1. Embed the image using standard Markdown image syntax.
  2. Wrap the image in an HTML <div> or <span> tag.
  3. Apply inline CSS to add a border.

For example:

<div style="border: 2px solid black;">![Alt text](image-url.jpg)</div>

This will display the image with a 2px solid black border. You can customize the border style, width, and color by modifying the CSS in the style attribute.

Remember, not all Markdown parsers support HTML and CSS, so this method might not work in all environments.