Сделать границу прерывистой

HTML:

<div></div>

CSS:

div {
  background: purple;
  height: 200px;
  width: 200px;
  margin: 50px auto;
  position: relative;
  min-height: 200px; /* Just adjust as you wish */
  min-width: 200px; /* Just adjust as you wish */
}

div:before { /* Bottom half Borders */
  content: '';
  position: absolute;
  top: 90px; /* Height of left border */
             /* Higher value - smaller border line */
  left: -20px; /* Margin between div edge */
  right: -20px; /* Margin between div edge */
  bottom: -20px; /* Margin between div edge */
  border: solid 5px #000;
  border-top: none;
  border-left: none;

}

div:after { /* Top half Borders */
  content: '';
  position: absolute;
  top: -20px; /* Margin between div edge */
  left: -20px; /* Height of top border */
             /* Higher value - smaller border line */
  right: -20px; /* Margin between div edge */
  bottom: 100px;
  border: solid 5px #000;
  border-right: none;
  border-bottom: none;

}