Прерывистая рамка

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  height: 100%; 
} 
 
body { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.wrapper { 
  width: 40rem; 
  height: 20rem; 
  background-image: url('https://images.unsplash.com/photo-1503264116251-35a269479413?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=281dd3518c2edb68c31b19bbcb624a0f&auto=format&fit=crop&w=1350&q=80'); 
  padding: 1rem; 
} 
 
.wrapper .wrapper-img { 
  width: 100%; 
  height: 100%; 
  background-image: linear-gradient(white, white), linear-gradient(90deg, white 150px, transparent 2vw), linear-gradient(transparent 15vw, white 15vw), linear-gradient(90deg, white 25vw, transparent 25vw, transparent 40vw, white 40vw); 
  background-size: 4px 100%, 150px 4px, 4px 200px, 100% 4px; 
  background-position: 0 0, 0 0, 100% 100%, 100% 100%; 
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; 
}

<div class="wrapper"> 
  <div class="wrapper-img"></div> 
  </div

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
img { 
  display: block; 
  max-width: 100%; 
  object-fit: cover; 
} 
 
.block { 
  width: 768px; 
  margin: auto; 
  position: relative; 
  height: 480px; 
  position: relative; 
  border-bottom: 1px solid red; 
} 
 
.elem:nth-of-type(1) { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 1; 
} 
 
.elem:nth-of-type(2) { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 2; 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-end; 
  padding: 20px; 
} 
 
.block--elem__mod1 { 
  width: 320px; 
  height: 440px; 
  border-left: 2px solid #fff; 
  border-bottom: 2px solid #fff; 
} 
 
.block--elem__mod1:after { 
  content: ""; 
  position: absolute; 
  top: 20px; 
  left: 20px; 
  width: 200px; 
  height: 0; 
  border: 1px solid #fff; 
} 
 
.block--elem__mod2 { 
  width: 200px; 
  height: 300px; 
  border-right: 2px solid #fff; 
  border-bottom: 2px solid #fff; 
}

<div class="block"> 
  <div class="elem"> 
    <img src="https://w-dog.ru/wallpapers/1/18/415808928504008.jpg" alt=""> 
  </div> 
  <div class="elem"> 
    <div class="block--elem__mod1"></div> 
    <div class="block--elem__mod2"></div> 
  </div> 
</div>

.home { 
  width: 100%; 
  height: 70vh; 
  min-height: 300px; 
  background: black url('https://9to5mac.com/wp-content/uploads/sites/6/2018/08/xsw-featured.png?w=1600') no-repeat; 
  background-size: cover; 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  color: white; 
  font: 36px Arial; 
} 
 
.home:before { 
  content: ''; 
  display: block; 
  position: absolute; 
  top: 1vw; 
  left: 1vw; 
  right: 50%; 
  bottom: 1vw; 
  border-left: 4px solid white; 
  border-bottom: 4px solid white; 
  background: linear-gradient(white, white) no-repeat; 
  background-size: 30% 4px; 
} 
 
.home:after { 
  content: ''; 
  display: block; 
  position: absolute; 
  top: 40%; 
  left: 80%; 
  right: 1vw; 
  bottom: 1vw; 
  border-right: 4px solid white; 
  border-bottom: 4px solid white; 
}

<div class="home"> 
  stackoverflow 
</div>