← Examples Gallery

Shapes & Borders (DOM)

Border radius, corner-shape, and per-item borders via light DOM CSS on .alapelem.

All CSS on this page applies equally to popover mode — the menu renders as the same .alapelem element whether using DOM or popover.

Border Radius

.alap_sp-rounded { border-radius: 12px; }

Corner Shape

corner-shape is a standard CSS property — works on any element, not just web components.

.alap_sp-squircle {
  corner-shape: squircle;
  border-radius: 20px;
}
.alap_sp-scoop {
  corner-shape: scoop;
  border-radius: 20px;
}
.alap_sp-bevel {
  corner-shape: bevel;
  border-radius: 16px;
}

Per-Item Borders

.alap_sp-item-border li + li {
  border-top: 1px solid #e2e8f0;
}

Pill Items

.alap_sp-item-pill {
  background: #f8fafc;
}
.alap_sp-item-pill li {
  margin: 0.15rem 0.25rem;
}
.alap_sp-item-pill a {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}

Asymmetric Corners (Sale Tag)

.alap_sp-sale {
  corner-shape: round bevel bevel round;
  border-radius: 8px 20px 20px 8px;
  background: #dc2626;
  border-color: #dc2626;
}
.alap_sp-sale a       { color: #ffffff; }
.alap_sp-sale a:hover { background: #b91c1c; color: #fef08a; }