How to add border to an image from web link

[AnthonyInCo]

What I’m trying to do

I’m trying to add a border around image previews that are from weblinks. For example:

![Obsidian Logo](https://images2.imgbox.com/a3/8b/1DXsqVLY_o.png)

Things I have tried

I’ve found this forum topic, which suggest css snippet:

How to add shadow/boarder to images

Use case or problem when add a tranparent image or black background image, it difficult to tell the boarder of images Proposed solution support shadow or shadow to images Current workaround (optional) maybe like what gitlab does as in this link add shadow to pics Related feature requests (optional)

Based on that, this is my css snippet:

.markdown-source-view.mod-cm6 .internal-embed > img, .markdown-preview-view .internal-embed > img {
box-shadow: 0 28px 8px -26px rgba(0, 0, 0);
border:1px solid #ccc;
margin: 0.25rem 0.25rem 0.75rem 0.25rem;
}

And while this works for embedded images, it doesn’t work for image previews from web links. I imagine it’s the .internal-embed part of the css code that makes it work for embedded images, I’ve been unable to find any guidance on how to modify the css snippet to work for web link previews.

In a note where I have the same image first as an internal embedded image, and then as a web link:

![[obsidian.png|150]]

![Obsidian Logo|150](https://images2.imgbox.com/a3/8b/1DXsqVLY_o.png)

I see this:

[ariehen]

Try adding this to take care of all external embedded images:

.markdown-source-view.mod-cm6 .cm-content > img,
.markdown-preview-view img, 
.markdown-rendered img {
    box-shadow: 0 28px 8px -26px rgba(0, 0, 0);
    border:1px solid #ccc;
    margin: 0.25rem 0.25rem 0.75rem 0.25rem;
}

[AnthonyInCo]

Worked perfectly! Thank you!

For others looking at this solution,
.markdown-source-view.mod-cm6 .cm-content > img,
is in addition to the other .markdown lines, so this is the full css snippet that now applies the border/shadow to both external and internal embedded images:

.markdown-source-view.mod-cm6 .internal-embed > img, 
.markdown-source-view.mod-cm6 .cm-content > img,
.markdown-preview-view img, 
.markdown-rendered img {
box-shadow: 0 28px 8px -26px rgba(0, 0, 0);
border:1px solid #ccc;
margin: 0.25rem 0.25rem 0.75rem 0.25rem;
}