JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px;
  font-family: 'Neucha', cursive;
}

div {
  width: 200px;
  height: 200px;
  background:
    linear-gradient(to bottom, black 20px, transparent 20px, transparent 24px, black 24px, black calc(100% - 24px), transparent calc(100% - 24px), transparent calc(100% - 20px), black calc(100% - 20px)) no-repeat 24px 0 / 1px 100%,
    linear-gradient(to bottom, black 20px, transparent 20px, transparent 24px, black 24px, black calc(100% - 24px), transparent calc(100% - 24px), transparent calc(100% - 20px), black calc(100% - 20px)) no-repeat right 24px top 0/ 1px 100%,
    linear-gradient(to right, black 20px, transparent 20px, transparent 24px, black 24px, black calc(100% - 24px), transparent calc(100% - 24px), transparent calc(100% - 20px), black calc(100% - 20px)) no-repeat top 24px left 0/ 100% 1px,
    linear-gradient(to right, black 20px, transparent 20px, transparent 24px, black 24px, black calc(100% - 24px), transparent calc(100% - 24px), transparent calc(100% - 20px), black calc(100% - 20px)) no-repeat bottom 24px left 0/ 100% 1px;
}