<main>
  <h1>Responsive Image Border</h1>
  <p>This uses a single image for the whole border with the different parts for the edges and corners defined by the slice property.</p>
  <p>Lorem ipsum dolor sit amet, eos utroque expetenda ad, te choro pericula voluptaria nam. Patrioque consequat democritum qui te, iriure eligendi eam cu. Saepe delicata id mea. Vel ea alia verterem neglegentur, ut nemore suscipit abhorreant ius. In tale
    verterem quaestio eos, falli dolorem percipit cu mei.</p>
  <p>Pri offendit comprehensam et, vis et dolor alterum. Pri eu aperiri legimus, deserunt lobortis no usu. Pro id persius nostrud voluptaria, qualisque prodesset disputationi vim no, omnes primis disputationi vis in. Ex sit mollis utamur percipitur, duo
    eu case nulla suscipiantur.</p>
</main>

            body {
              background: #333;
            }
            
            main {
              background: #bbb;
              max-width: 60em;
              width: 90%;
              margin: 2em auto;
              padding: 4%;
              box-sizing: border-box;
              border: 50px solid #000;
              /* Fall-back for calc & vw */
              border: calc(3vw + 1.5em) solid #000;
              /* dynamic responsive width */
              border-image-source: url(http://burtonstatherheritage.org/image/tex/border1.jpg);
              border-image-slice: 70;
              border-image-repeat: repeat;
            }