How to set custom sided border to image & make it appear on on other?

I am trying to achieve the below required output.

Below is border part which i have achieved. Now how to overlap image & set borders as below image.

Below is my code.

<!DOCTYPE html>
<html>
<head>
    <style> 
        .img1 {

            border: 15px solid transparent;
            background: 
            linear-gradient(#faa633, #faa633) 
            top left/ /* position */
            50% 50% /* width height */
            border-box no-repeat;
            z-index: 1
        }

        .img2{
            border: 15px solid transparent;
            background: 
            linear-gradient(#faa633, #faa633) 
            top right/ /* position */
            50% 100% /* width height */
            border-box no-repeat;
            z-index: 2
        }
    </style>
</head>
<body>

    <img src="https://picsum.photos/id/10/200/150" class="img1">
    <img src="https://picsum.photos/id/10/200/150" class="img2" >


</body>
</html>

Solution

with pseudo elements we can achieve this.

.image-container {
  display: inline-block;
  margin-left: 100px; /* for testing purpose */
  position: relative; /* It must add to parent element */
}

.img1 {
  border: 15px solid transparent;
  background: linear-gradient(#faa633, #faa633) 
            top left/ /* position */
            50% 50% /* width height */
            border-box no-repeat;
  z-index: 1;
  position: absolute;
  bottom: -100px; /* to push to bottom (height/2) */
  left: -100px; /* to push to left (width/2) */
}

.img2-box {
  position: relative;
  display: inline-block;
}

.img2-box::before {
  position: absolute;
  content: '';
  width: 15px;
  height: 100%;
  left: 0;
  top: 0;
  background: #fff;
}

.img2-box::after {
  position: absolute;
  content: '';
  height: 15px;
  width: 60%;
  left: 0;
  top: 0;
  background: #fff;
}

.img2-box img {
  border: 15px solid #faa633
}

<div class="image-container">
  <img src="https://picsum.photos/id/10/200/200" class="img1">
  <div class="img2-box">
    <img src="https://picsum.photos/id/10/400/300" class="img2">
  </div>
</div>