<main>
      <div class="auto-grid">
        <div class="preview" style="border-style: dotted">
          <code>border-style: dotted;</code>
        </div>
        <div class="preview" style="border-style: dashed">
          <code>border-style: dashed;</code>
        </div>
        <div class="preview" style="border-style: solid">
          <code>border-style: solid;</code>
        </div>
        <div class="preview" style="border-style: double">
          <code>border-style: double;</code>
        </div>
        <div class="preview" style="border-style: groove">
          <code>border-style: groove;</code>
        </div>
        <div class="preview" style="border-style: ridge">
          <code>border-style: ridge;</code>
        </div>
        <div class="preview" style="border-style: inset">
          <code>border-style: inset;</code>
        </div>
        <div class="preview" style="border-style: outset">
          <code>border-style: outset;</code>
        </div>
      </div>
    </main>

.preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-color: red;
  border-width: 5px;
  aspect-ratio: 5/1;
}

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size, 16rem), 1fr));
  gap: 1rem;
  padding: 0;
}

main {
  width: 100%;
}