Как сделать рамку по углам блока

* { 
  box-sizing: border-box; 
} 
 
.block { 
  background: #066fff; 
  width: 300px; 
  height: 180px; 
  margin: 20px auto; 
  position: relative; 
} 
 
.border { 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  right: 0px; 
  bottom: 0px; 
} 
 
.block:before, 
.block:after, 
.border:before, 
.border:after { 
  position: absolute; 
  width: 18px; 
  height: 18px; 
  content: ''; 
  border-color: #082346; 
  border-style: solid; 
} 
 
.block:before { 
  left: 0px; 
  top: 0px; 
  border-width: 9px 0 0 9px; 
} 
 
.block:after { 
  right: 0px; 
  top: 0px; 
  border-width: 9px 9px 0 0; 
} 
 
.border:before { 
  right: 0px; 
  bottom: 0px; 
  border-width: 0 9px 9px 0; 
} 
 
.border:after { 
  left: 0px; 
  bottom: 0px; 
  border-width: 0 0 9px 9px; 
}

<div class="block"> 
  <div class="border"></div> 
</div>

#content {position:relative;width:400px;height:300px;} 
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after { 
    position:absolute; 
    width:80px; height: 80px; 
    border-color:black;  
    border-style:solid;  
    content: ' '; 
} 
#content:before {top:0;left:0;border-width: 3px 0 0 3px} 
#content:after {top:0;right:0;border-width: 3px 3px 0 0} 
#content>:first-child:before {bottom:0;right:0;border-width: 0 3px 3px 0} 
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 3px 3px} 
.blue { 
  background:blue; 
  height:100%; 
}

<div id="content"><div class="blue"></div></div>