How do I add frames around images?

[YevheniiPokhvalii]

Some of my images are partially white and look confusing on the light scheme. Is there an easy way to add a black frame around an image using the material theme?

[kamilkrzyskow]

Hello,
you can add a border to all images via some additional css:
https://squidfunk.github.io/mkdocs-material/customization/#additional-css

.md-content img {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

The .md-content selector is required to avoid adding a border to the logo in the header.
Instead of a rigid black color, perhaps you'd prefer a dynamic color that matches the selected palette.
For example you can use border-color: var(--md-accent-fg-color);, as for other predefined color variables please reference this page:
https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss

---

As a side note, even though it's not your query, the https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-colors section links to an example that depicts a working project structure with the additional css. You can use it as reference as well.

---

EDIT: Since you specifically said "frame" perhaps setting the border isn't enough.

.md-content img {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  outline-width: 3px;
  outline-style: solid;
  outline-color: grey;
}

This should create a sort of bezel effect around the images. Also to make it more compact you can merge the statements together:

.md-content img {
  border: 1px solid black;
  outline: 3px solid grey;
}

[YevheniiPokhvalii]

Thank you for the details.

[kamilkrzyskow]

Sure thing,
additionally apart of a style change you could use a figure element with a caption to showcase the image better on the center of the page.
https://squidfunk.github.io/mkdocs-material/reference/images/#image-captions