<div class="block">
    <div class="frame-top"></div>
    <div class="frame-bottom"></div>
    <div class="frame-left"></div>
    <div class="frame-right"></div>
  </div>

.block {
    width: 100px;
    height: 100px;
    background-color: #fff;
    position: relative;
    border: 1px solid black;
    margin: 60px;
  }
  
  .frame-top {
    width: 100%;
    height: 30px;
    position: absolute;
    border-left: 1px solid black;
    border-right: 1px solid black;
    top: -40px;
  }
  
  .frame-bottom {
    width: 100%;
    height: 30px;
    position: absolute;
    border-left: 1px solid black;
    border-right: 1px solid black;
    bottom: -40px;
  }
  
  .frame-left {
    width: 30px;
    height: 100%;
    position: absolute;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    left: -40px;
  }
  
  .frame-right {
    width: 30px;
    height: 100%;
    position: absolute;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    right: -40px;
  }