<!--  
Tutorial: https://css-tricks.com/blurred-borders-in-css/
Author: @Ana Tudor
-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  padding: 2vw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
  grid-gap: 2vw;
}

div {
  min-height: 200px;
  background: url(https://images.unsplash.com/photo-1544070078-a212eda27b49?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) no-repeat;
  background-size: cover;
  position: relative;
  
  &:nth-child(1){
    border: 1.5em solid rgba(#000, .03);
    background-origin: border-box;
    background-clip: padding-box;
    
    &:before {
      content: '';
      position: absolute;
      z-index: -1; 
      top: -1.5em; 
      right: -1.5em; 
      bottom: -1.5em; 
      left: -1.5em;
      border: inherit;
      border-color: transparent;
      background: inherit;
      background-clip: border-box;
      filter:  blur(9px);
    }
  }
  
  &:nth-child(2) {
    border: 1.5em solid rgba(#000, .03);
    background-origin: border-box;
    background-clip: padding-box;
    
    &:before {
      content: '';
      position: absolute;
      z-index: -1; 
      top: -1.5em; 
      right: -1.5em; 
      bottom: -1.5em; 
      left: -1.5em;
      border: inherit;
      border-color: transparent;
      background: inherit;
      background-clip: border-box;
      filter: blur(9px);
      clip-path: inset(0);
    }
  }
  
  &:nth-child(3) {
    border: 1.5em solid rgba(#000, .03);
    background-origin: border-box;
    background-clip: padding-box;
    border-radius: 2vw;
    
    &:before {
      content: '';
      position: absolute;
      z-index: -1; 
      top: -1.5em; 
      right: -1.5em; 
      bottom: -1.5em; 
      left: -1.5em;
      border: inherit;
      border-radius: inherit;
      border-color: transparent;
      background: inherit;
      background-clip: border-box;
      filter: blur(9px);
      clip-path: inset(0 round 2vw);
    }
  }
  &:nth-child(4) {
    overflow: hidden;
	  position: relative;
	  padding: 1.5em;
	  background-origin: padding-box;
    background-clip: content-box;
	
	  &:before {
		  position: absolute;
		  z-index: -1; 
		  top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0;
		  background: inherit;
		  background-clip: padding-box;
		  filter: blur(9px);
		  content: '';
	  }
  }
  
  &:nth-child(5) {
    overflow: hidden;
	  position: relative;
	  padding: 1.5em;
		background-origin:padding-box;
		background-clip:content-box;
	
    &:before {
      position: absolute;
      z-index: -1; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0;
      background: inherit;
      background-clip: padding-box;
      filter: blur(9px);
      content: ''
    }
  }
  
  &:nth-child(6) {
    overflow: hidden;
	  position: relative;
	  padding: 1.5em;
    background-image: url(https://images.unsplash.com/photo-1544070078-a212eda27b49?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ), linear-gradient(rgba(#000, 0.03), rgba(#000, 0.03));
		background-origin:padding-box;
		background-clip:content-box;
	
    &:before {
      position: absolute;
      z-index: -1; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0;
      background: url(https://images.unsplash.com/photo-1544070078-a212eda27b49?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
      filter: blur(9px);
      content: ''
    }
  }
}