stylish border

by Ting-Yuan Chang

HTML

<div class="box">
  <img src="https://images.dog.ceo/breeds/samoyed/n02111889_5786.jpg">
</div>

CSS

body {
  background: black;
}

.box {
  margin: 20px;
  
  width: 300px;
  height: 200px;
  background: darkblue;
  position: relative;
}

.box::before, .box::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 30%;
  filter: drop-shadow(0 0 5px #FFFFFF) drop-shadow(0 0 5px #FFFFFF) drop-shadow(0 0 5px #FFFFFF) ;
  border: 1px solid white;
}

.box::before {
  top: -1px;
  left: -1px;
  border-bottom: 0px;
  border-right: 0px;
}

.box::after {
  bottom: -1px;
  right: -1px;
  border-top: 0px;
  border-left: 0px;
}

.box > img {
  position: relative;
  width: 100%;
  height: 100%;
}