<main>
  <h1>Image Borders</h1>
  <figure class="floral">
    <img src="http://via.placeholder.com/250x350" width="250" height="350" alt="A Placeholder Picture">
  </figure>
  <figure class="floral">
    <img src="http://via.placeholder.com/350x350" width="350" height="350" alt="A Placeholder Picture">
  </figure>

  <figure class="floral">
    <img src="http://via.placeholder.com/600x400" width="600" height="400" alt="A Placeholder Picture">
  </figure>
</main>

:root {
  --border-size: 60px; /* control size from one place */
}
body {
  background: #333;
}

main {
  background: #bbb;
  max-width: 50em;
  width: 90%;
  margin: 2em auto;
  padding: 4%;
}
h1 {
  text-align: center;
}
.floral {
  position: relative;
  display: table; /* Shrink to fit */
  background: #fff;
  border: var(--border-size) solid #fff;
  box-shadow: 0 0 10px 10px #fff;
  border-image-source: url(https://discourse-cdn-sjc1.com/sitepoint/community/uploads/default/optimized/3X/1/8/1872fef2caaeef17e40d7e0ddeb4dbda2f91f788_1_500x500.png);
  border-image-slice: 80; /* Portion of border image to use */
  border-clip: content-box;
  margin: 2em auto;
}
.floral img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.floral::after {
  /* for the soft edge */
  display: block;
  position: absolute;
  content: "";
  top: var(--border-size);
  bottom: var(--border-size);
  left: var(--border-size);
  right: var(--border-size);
  z-index: 5;
  box-shadow: inset 0 0 10px 5px #fff;
}