Define Regions With Boundaries

#border / backgroundcommon-region

Use background, border, or box-shadow to create clear groups so the eye sees one region, not scattered items.

Why it works: Law of Common Region — elements inside a clearly defined boundary are perceived as one group; reduces cognitive load.

live_demo

code

.region-list.bounded .item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.region-list.bounded .group {
  background: var(--surface-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 8px;
}