.box {
  width: 50vw;
  height: 50vh;
  overflow: hidden;
  resize: both;
  min-width: 150px;
  min-height: 60px;
  display: grid;
  place-items: center;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACoElEQVR4Xu2b227EIAxEs///0a0qVdWGpBxPbMhlp68YGw5jQ2D7WvxXSuBV6s3OFgMtFoGBTgD6BTGqF6GN1/rPtmeRSTz24EgOsqNdliULjPpnhyjxMFDGbaDMSLIYDrQdzeiaSrO/VPwjKW+gawIrhga61T+leFdQBjoBaBsitWJUAHeOTVRSaDxqTSV/NJ5VeyR4acAdwOSfDvrShA/El/wb6PbDgpKqy8xATwB6tZoqpeDoFM8O5qc/1bxsjFv7j6S8FUpV9a3dQBmWxEgy/ic2pSjFoOu3bLuaYTTe7hKkOv96NtBkyleveFaB1L96vFZoQyCbUcOBcln/IIuKGvpBuHiqBsqMJAsDlXCxsYEyI8nCQCVcbGygzEiyMFAJFxtHHunoCUJt51GNtaAvq1S7gS6bn3QaqCjoFDD6cZsVOkGh6u1Ma3+3jY4uS6T5RSZfGlBMzxnmpfMz0OJHRwOdAJRSgM6dUs2ZkdPJC2aJR2SXJ0BSwBMAqptsSjAGul1hAxVVr2aUZO9NacKmpNYcqrGigKabkwKl+VmhVmi5gocrdOhtTDkO3eHQ+UWOTXSMUNt1BLU9DLSW59h/1rVCT7gPLRbIs91Fjk3PJlA8OwM10GICxe6sUAMtJlDszgo10GICxe4qFEqXCxRj6KfgDq/seLtLQJONrF92gAbaUDbQNyBWKD/SRbL0z+YIUFKk9GRwoMZd2r+Bsv4kRpLxb2wrtLMIBnqCQs9WJD2xXKqmRhRqoOsl6zIz0Ae+y1MG3D7laYLZmkXbwK3jR149CUCkbJCP93YDVWgFbA00AEkx+Tigo1OcNiG1XVnMPVta4NV4jtRQA+2cSw2U9WuFMiPJIg1UimZj4bvUsHQC1RuMPoKH9TDQ4gX9BlCQ8FXGJNbHAAAAAElFTkSuQmCC")
    28 / 28px / 0 round;
  border-width: 28px;
  border-style: solid;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}