101

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?

2
  • 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
    May 20, 2016 at 15:42
  • 1
    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.
    – tgharold
    May 20, 2016 at 15:47

10 Answers 10

148

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>
9
  • 3
    "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.
    – skalee
    Apr 15, 2019 at 5:44
  • 9
    @skalee The answer works for github just fine. All I’m saying there is that you need to use the correct syntax.
    – kdbanman
    Apr 16, 2019 at 6:02
  • 3
    it does work on github. You need to close the img tag though.
    – Dionys
    Jun 29, 2020 at 17:30
  • 2
    Looks really nice. Had just a simple border in mind, going back with some rounded edges, elevation effect and a shadow around the image. Aug 2, 2020 at 18:36
  • 2
    This worked for me on our gitlab instance. +1
    – TxAG98
    Feb 23, 2021 at 21:18
38

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:

screenshot

0
28

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.

1
  • 1
    This also worked for me with VSCode's markdown preview, while @kesadae11's answer did not.
    – s6mike
    Aug 3, 2022 at 22:29
22

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

<table><tr><td>
    <img src="/images/logo.png" />
</td></tr></table>
1
  • 2
    Is there a way to remove the padding inside the table cells?
    – Harry M
    May 26, 2020 at 21:54
8

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 .

3

I often do like this in GitHub comments.
(Images can be HTML tags or markdown, so some line breaks may be necessary.)

<!-- No end tag -->
<kbd> image

| image
|-

label_text
|-
image

image | image | image
-|-|-

<!-- with `kbd` for White background images -->
<kbd> image | <kbd> image | <kbd> image
-|-|-
Before | After
-|-
image | image
<!-- Template with details tag -->
<details>
<summary>Screenshots</summary>

Before | After
-|-
image | image
</details>
<!-- Vertical alignment -->
<table>
<tr valign="top">
<td>

image
<td>

![...b)
<tr valign="top">
<td>

image
<td>

image
</table>
0

I created a "readme.md" file that includes a chart showing different colors and their codes using the RGB system. To highlight the color white, I added a border around it.

Here's the solution I used:

<img style="border: .5px solid;" src="https://placehold.co/100x50/FFFFFF/FFFFFF">
0
<img src='src' alt="des" style="border: 2px solid  gray; border-radius:15px">

Enjoy Coding :)

1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jul 24 at 10:20
-1

I used the following and it worked for me just fine

<img src="image-20220820124005006.png" alt="image-20220820124005006" style="border: 3px solid red" />
-7

Another way is to provide the border yourself in an image editing tool and upload that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.