Robert Birming

Frame image

An add-on that wraps any image in a padded card with a border. A quick way to give a photo or screenshot a framed, polished look.1

Preview

Example image

How to use

Wrap your image in a container using the frame class.

Markup

<div class="frame">

![Your image](https://example.com/image.jpg)

</div>

Styles

/* Frame image | robertbirming.com */
.frame {
  margin-block: var(--space-block);
  padding: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2);
}

.frame img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--radius);
}

.frame p {
  margin: 0;
}

Want more? Check out all available Bearming add-ons.

Happy blogging, picture perfect.

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩