Shapes & Borders

Corner geometry, per-corner overrides, item dividers, and border customization.

Corner Shape Gallery

All six corner-shape values. Each uses --alap-radius: 24px to make the shape obvious.

round

coffee

border-radius only

squircle

coffee

iOS superellipse

scoop

coffee

concave cutout

notch

coffee

straight cut

bevel

coffee

angled chamfer

straight

coffee

sharp corners

/* Each uses the same radius — the shape changes the geometry */
alap-link { --alap-radius: 24px; }

--alap-corner-shape: round;     /* default circular arc */
--alap-corner-shape: squircle;  /* iOS superellipse */
--alap-corner-shape: scoop;     /* concave inward */
--alap-corner-shape: notch;     /* straight diagonal cut */
--alap-corner-shape: bevel;     /* angled chamfer */
--alap-corner-shape: straight;  /* sharp 90° corners (ignores radius) */

Squircle (themed)

iOS-style superellipse corners: coffee and cars.

--alap-corner-shape: squircle with --alap-radius: 16px. Browsers without corner-shape show standard 16px rounded corners — equally polished.

.squircle-section alap-link {
  --alap-corner-shape: squircle;
  --alap-radius: 16px;
}

Scoop with Colored Border

Concave cutout with a colored border: NYC spots.

corner-shape: scoop with --alap-border-width: 2px. Fallback: standard rounded corners.

.scoop-section alap-link {
  --alap-corner-shape: scoop;
  --alap-radius: 16px;
  --alap-border-width: 2px;
  --alap-border: #6366f1;
}

Asymmetric Corners (Sale Tag)

Price-tag style — mixed corner shapes: cars on sale

--alap-corner-shape: round bevel bevel round bevels the right side while keeping the left rounded. Combine with a bold color and the shape speaks for itself.

/* Using the 4-value shorthand */
.sale-section alap-link {
  --alap-corner-shape: round bevel bevel round;
  --alap-radius: 8px 20px 20px 8px;
}

Per-Corner Longhands

Each corner set independently: bridges

Physical longhands via ::part(menu) override the shorthand for specific corners.

.longhands-section alap-link::part(menu) {
  corner-shape: round;                    /* base: all round */
  corner-top-right-shape: bevel;          /* override one corner */
  corner-bottom-left-shape: scoop;
  border-radius: 20px;
}

Side Shorthands

Set two corners at once: coffee

corner-right-shape via ::part(menu) sets both top-right and bottom-right.

.sides-section alap-link::part(menu) {
  corner-shape: round;
  corner-right-shape: bevel;  /* both right corners */
  border-radius: 16px;
}

Snipped Corners (Brutalist)

Brutalist aesthetic — beveled corners: bridges

Uses ::part(menu) for direct CSS access to combine bevel with custom colors.

.snipped-section alap-link::part(menu) {
  corner-shape: bevel;
  border-radius: 4px 4px 20px 4px;
  background: #0f172a;
  border: 2px solid #475569;
}

Item Borders & Spacing

Dividers

Subtle dividers between items: coffee spots

.dividers-section alap-link::part(item) {
  border-bottom: 1px solid #e5e7eb;
}
.dividers-section alap-link::part(item):last-child {
  border-bottom: none;
}

Pill-Style Items

Spaced, rounded items: bridges

.pills-section alap-link {
  --alap-item-gap: 4px;
  --alap-item-border-radius: 6px;
  --alap-item-border: 1px solid #e2e8f0;
  --alap-menu-padding: 0.5rem;
  --alap-bg: #f8fafc;
}