<div></div>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 50vw;
  height: 50vh;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6);
  padding: 1vw;
  background-color: #9CB3E3;
  background-image: 
    // top line
    linear-gradient(to right, rgba(0, 0, 0, 0.8) 60%, transparent 60%, transparent 100%), 
    linear-gradient(to right, rgba(255, 255, 255, 0.5) 60%, transparent 60%, transparent 100%),  
    
    // right line
    
    linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 60%, transparent 60%, transparent 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 60%, transparent 60%, transparent 100%), 
    
    // bottom line
    linear-gradient(to right, rgba(0, 0, 0, 0.8) 60%, transparent 60%, transparent 100%), 
    linear-gradient(to right, rgba(255, 255, 255, 0.5) 60%, transparent 60%, transparent 100%),
    
    // left line
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 60%, transparent 60%, transparent 100%), 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 60%, transparent 60%, transparent 100%),
    
    linear-gradient(to right, #9CB3E3, #9CB3E3);
  background-repeat: 
    repeat-x, repeat-x,  // top line
    repeat-y, repeat-y,  // right line
    repeat-x, repeat-x,  // bottom line
    repeat-y, repeat-y,  // left line
    repeat;
  background-size: 
    40px 1px,40px 1px, // top line
    1px 40px,1px 40px, // right line
    40px 1px,40px 1px, // bottom line
    1px 40px,1px 40px, // left line
    cover;
  background-position: 
    2vw 2vw, 2vw calc(2vw + 1px), // top line
    calc(100% - 2vw) 1vw, calc(100% - 2vw - 1px) 1vw, // right line
    2vw calc(100% - 2vw), 2vw calc(100% - 2vw + 1px), // top line
    3vw 1vw, calc(3vw - 1px) 1vw, // right line
    0 0;
  background-clip: 
    content-box, content-box,  // top line
    content-box, content-box,  // right line
    content-box, content-box,  // bottom line
    content-box, content-box,  // left line
    border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.