.rounded-border {
  --b: 1px;
  --c: var(--subtext);
  --w: 12px;
  --r: 10px;
  padding: var(--b);
  position: relative;
}
.rounded-border:before {
  margin-top: -1px;
  height: calc(100% + 2px);
  margin-left: -1px;
  width: calc(100% + 2px);
  z-index: -1;
  content: "";
  transition: all 0.3s;
  position: absolute;
  inset: 0;
  background: var(--c);
  padding: var(--b);
  border-radius: var(--r);
  -webkit-mask: linear-gradient(0deg, #000 calc(2 * var(--b)), transparent 0)
      50% var(--b) / calc(100% - 2 * var(--w)) 100% repeat-y,
    linear-gradient(-90deg, #000 calc(2 * var(--b)), transparent 0) var(--b) 50%/100%
      calc(100% - 2 * var(--w)) repeat-x,
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.rounded-border-accordion {
  --b: 1px;
  --c: var(--subtext);
  --w: 12px;
  --r: 10px;
  padding: var(--b);
  position: relative;
}
.rounded-border-accordion:before {
  margin-top: -2px;
  height: calc(100% + 4px);
  margin-left: -2px;
  width: calc(100% + 4px);
  z-index: -1;
  content: "";
  transition: all 0.3s;
  position: absolute;
  inset: 0;
  background: var(--c);
  padding: var(--b);
  border-radius: var(--r);
  -webkit-mask: linear-gradient(0deg, #000 calc(2 * var(--b)), transparent 0)
      50% var(--b) / calc(100% - 2 * var(--w)) 100% repeat-y,
    linear-gradient(-90deg, #000 calc(2 * var(--b)), transparent 0) var(--b) 50%/100%
      calc(100% - 2 * var(--w)) repeat-x,
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}