Is it possible to add border to image in GitHub markdown?

html github markdown

35,854

Solution 1

It's hacky and not always pretty, but surround the image with a <kbd> tag.

Before

<img src="https://i.stack.imgur.com/CtiyS.png">

After

<kbd>
  <img src="https://i.stack.imgur.com/CtiyS.png">
</kbd>

And it renders like this:

Surrounding the markdown image syntax might not work for some markdown implementations. If the following does not work

<kbd>![alt-text](https://example.com/image.png)</kbd>

Try embedding the image as an HTML <img> tag instead

<kbd><img src="https://example.com/image.png" /></kbd>

Solution 2

Here on StackExchange sites, I like to use the "quote" markup > for this purpose.

For example:

> [![screenshot][1]][1]

  [1]: https://i.stack.imgur.com/CtiyS.png

renders like this:

Solution 3

You can use <table> tag to create tables without header.

<table><tr><td>
    <img src="/images/logo.png" />
</td></tr></table>

Solution 4

The way I do this on GitLab is using a table like so:

| ![Alt name of image](/path-to-image.png) |
|-|

This is similar to @kesadae11's answer but in order to make it work in GitLab, the additional pipe characters are needed.

Solution 5

Another way is to use table's first cell for it.

Code:

|![pictureAliasName](pathOfPicture/pictureName.png)|
-

The - character is important in the code.

You can see the result here .

View more solutions

35,854

madox2

Web developer focusing on Java and JavaScript technologies.

Updated on July 18, 2022

Comments

madox2 almost 2 years
I need to add border to the image in GitHub README.md file. This is how image should be embeded:
```
![GitHub Logo](/images/logo.png)
```
I have tried to wrap image with the table:
```
|--------------------------------|
|![GitHub Logo](/images/logo.png)|
```
but it is not possible to create table without header.

I have also tried to include image as html tag:
```
<img src="/images/logo.png" style="border: 1px solid black" />
```
but without success. Is there any way how to do this?
- tgharold almost 8 years
  
  Might not be possible any longer with just markdown, you used to be able to add things like "``` | width=100```" just before the closing parenthesis.
- tgharold almost 8 years
  
  And if you inspect the <img> element in the browser, you'll see that GitHub replaces your style="" with style="max-width:100%;". Thus preventing you from putting a style="" attribute on your img tag.
skalee about 5 years

"On GitHub, for example, the following will just render as weird looking text" — which makes this answer completely irrelevant, as this question is precisely about GitHub.
kdbanman about 5 years

@skalee The answer works for github just fine. All I’m saying there is that you need to use the correct syntax.
Harry M almost 4 years

Is there a way to remove the padding inside the table cells?
Dionys almost 4 years

it does work on github. You need to close the img tag though.
Sunit Gautam almost 4 years

Looks really nice. Had just a simple border in mind, going back with some rounded edges, elevation effect and a shadow around the image.
TxAG98 about 3 years

This worked for me on our gitlab instance. +1
John Roe almost 3 years

This is currently working fine on Github without using the img tag
kdbanman almost 3 years

Thanks for the update @JohnRoe, I've updated the answer accordingly.
Richard almost 3 years

This is a nice, simple way to make a screenshot stand out. Thanks.