Patterned frame

← All examples

PATTERNED
FRAME

The after layer's -media-after-border-image traces a striped SVG tile around the media.

Code

<style>
.patterned-frame {
  --steam-block-media-after-border-image: url("crosshatch.svg") 8% / 10px round;
}
</style>
<steam-block class="patterned-frame">
  <img slot="media" src="photo.jpg" alt="">
  <div slot="content"><h1>Patterned frame</h1></div>
</steam-block>