Borders & Radii

Define shared edges and corners. Select them in components.

Borders define the edge; Radii define the corner shape. A border preset combines width, style and color. A radius preset defines corner rounding. Either can include a responsive progression, but neither has to change with viewport width. Standard CSS remains available for deliberate local exceptions.

Where these definitions live today

Define borders and radii in the theme JSON. PostCSS, runtime theme generation and the preview use the same compiler and responsive resolver. Both plain CSS values and responsive progressions are supported.

Pass the effective theme JSON to the build and runtime. Legacy @theme definitions remain supported when included in the same compilation; JSON entries override matching legacy entries. Definitions from another compilation no longer leak through a process-global cache. The shared module owns defaults; generated compatibility files are postcss-uxdsl/theme/default-borders.uxdsl and postcss-uxdsl/theme/default-radii.uxdsl. Inspect the imported definitions instead of assuming a preset number is a pixel value.

One definition, multiple consumers

{
  "breakpoints": { "xs": 0, "md": 768 },
  "radii": { "2": "xs(8px) md(12px)" },
  "borders": { "1": "xs(1px solid #64748b) md(2px solid #64748b)" }
}

This illustrative example uses xs: 0 and md: 768. It uses literal values to isolate the behavior; shared definitions can also reference configured Spacing and Palette tokens.

.card {
  border: border(1);
  border-radius: radius(2);
}

.card {
  border: 1px solid #64748b;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .card {
    border: 2px solid #64748b;
    border-radius: 12px;
  }
}

Below 768px, the card has a 1px border and 8px corners. At 768px and above, it has a 2px border and 12px corners. The most recent applicable value persists until another rule overrides it. Reusing the presets on another component shares that progression. The component consumes variables such as --uxdsl__border__1 and --uxdsl__radius__2. Edit and rebuild the source theme, or replace the managed theme stylesheet through generateThemeCss(nextTheme), to update consumers. The plain CSS example isolates the equivalent visual behavior.

Connect edges to the design system

/* Assumes spacing 2/3 and palette primary.main are configured. */
@theme {
  radius-2: xs(space(2)) md(space(3));
  border-1: xs(1px solid palette(primary.main));
}

Spacing supplies reusable measurements; Palette supplies a semantic color role. A 1px hairline can intentionally remain stable. Prefer Density for component spacing, but do not automatically apply Density to border widths or corner radii: choose the intended edge and shape behavior.

Radius keywords

rounded() is an alias of radius(). These keywords are built-in values, not references to editable numbered presets. Rounding a box does not itself clip overflowing child content.

A local exception should remain local

.selected-card {
  border: border(1);
  border-color: palette(primary.main);
  border-style: dashed;
  border-radius: radius(2);
}

Put explicit longhand overrides after the shorthand. The shared engine now changes the preset variable across breakpoints, rather than emitting a new shorthand in the component, so these local overrides persist. Currently, when a numbered Border preset exists, border(1, palette(primary.main), dashed) selects that complete preset and ignores the optional color/style arguments. Use the longhand form above for a deliberate local override.

Change a shared Border when all its consumers should change their edge. Change a shared Radius when all its consumers should change their corners. For one component, select another suitable existing preset or use explicit CSS. Preserve the reference instead of copying its current computed value.

What the interactive demo changes

The editor below reads the active theme and shared defaults. It generates scoped CSS and reports resolved token references using the same engine as PostCSS and runtime. Edits affect only this preview and do not save your source JSON. Invalid updates retain the last valid preview. Reset restores the active theme; resize the real browser to inspect transitions.