Example of an image as a border | CSS Snippets

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 80%;
        height: 300px;
        margin-bottom: 20px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
        background-size: cover;
      }
      img {
        width: 30%;
        height: 30%;
      }
      .border-one {
        border: 20px solid transparent;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 50 round;
      }
      .border-two {
        border: 20px solid transparent;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 35% round;
      }
      .border-three {
        border: 20px solid transparent;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 100% round;
      }
      .border-four {
        border: 20px solid transparent;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") 20 stretch;
      }
    </style>
  </head>
  <body>
    <div class="border-one"></div>
    <div class="border-two"></div>
    <div class="border-three"></div>
    <div class="border-four"></div>
    <hr>
    <p>Here is the original image:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border">
  </body>
</html>