• 2020-10-01

    Author

    Jens Törnell

    Comments

    Start a discussion

    It may be tempting to use outline-offset.

    Unfortunately outline does not work with border radius, so you need a ::before element.

    Full page

    HTML

    <div class="stitched">
  Text
</div>

    CSS

    .stitched {
  padding: 2rem;
  background: #000;
  position: relative;
  color: #fff;
  box-sizing: border-box;
  border-radius: .5rem;
}

.stitched::before {
  content: "";
  position: absolute;
  border: 1px dashed #fff;
  left: .5rem;
  right: .5rem;
  top: .5rem;
  bottom: .5rem;
  border-radius: .5rem;
}

    Sources