<section class="examples">
  <figure>
    <div class="cropped-image origin-border clip-border"></div>
    <figcaption>
      <p><code>background-origin: border-box</code></p>
      <p><code>background-clip: border-box</code></p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image origin-padding clip-border"></div>
    <figcaption>
      <p><code>background-origin: padding-box</code></p>
      <p><code>background-clip: border-box</code></p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image origin-content clip-border"></div>
    <figcaption>
      <p><code>background-origin: content-box</code></p>
      <p><code>background-clip: border-box</code></p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image origin-border clip-padding"></div>
    <figcaption>
      <p><code>background-origin: border-box</code></p>
      <p><code>background-clip: padding-box</code></p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image origin-padding clip-padding"></div>
    <figcaption>
      <p><code>background-origin: padding-box</code></p>
      <p><code>background-clip: padding-box</code></p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image origin-content clip-padding"></div>
    <figcaption>
      <p><code>background-origin: content-box</code></p>
      <p><code>background-clip: padding-box</code></p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image origin-border clip-content"></div>
    <figcaption>
      <p><code>background-origin: border-box</code></p>
      <p><code>background-clip: content-box</code></p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image origin-padding clip-content"></div>
    <figcaption>
      <p><code>background-origin: padding-box</code></p>
      <p><code>background-clip: content-box</code></p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image origin-content clip-content"></div>
    <figcaption>
      <p><code>background-origin: content-box</code></p>
      <p><code>background-clip: content-box</code></p>
    </figcaption>
  </figure>
</section>

:root {
  font-family: sans-serif;

  --image-size: 200px;
  --image-padding: 1em;
  --image-border: 1em;
  --image-margin: 1em;

  --number-of-images-in-a-row: 3;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.examples {
  --examples-padding: 1em;

  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1em;
  max-width: calc(
    var(--number-of-images-in-a-row) * var(--image-size) + 2 *
      var(--number-of-images-in-a-row) * var(--image-padding) + 2 *
      var(--number-of-images-in-a-row) * var(--image-border) +
      var(--number-of-images-in-a-row) * var(--image-margin) + 2 *
      var(--examples-padding)
  );
}

figure {
  margin: 0;
  margin-right: var(--image-margin);
  width: min-content;
}

.cropped-image {
  width: var(--image-size);
  height: var(--image-size);

  border: var(--image-border) dashed #bbb;
  padding: var(--image-padding);

  background-image: url(https://ucarecdn.com/6476570f-a7e8-4346-9dde-e42ad30111d3/-/preview/400x400/-/crop/200x200/);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  color: white;
}

.origin-border {
  background-origin: border-box;
}

.origin-padding {
  background-origin: padding-box;
}

.origin-content {
  background-origin: content-box;
}

.clip-border {
  background-clip: border-box;
}

.clip-padding {
  background-clip: padding-box;
}

.clip-content {
  background-clip: content-box;
}