Domotion

Borders & radius

Per-side borders, all border-styles, rounded and pill shapes — with a couple of caveats.

Eight-tile gallery showing solid, dashed, dotted, groove, pill, squircle, asymmetric and inset borders.
Border styles and corner shapes captured live by Domotion.

Borders, outlines, corner radii, and shadows all round-trip faithfully. Per-side widths, per-corner radii (including elliptical), every border-style keyword, multi-layer outset and inset shadows, and stacked text-shadows (the "neon glow" pattern) all work. The exceptions:

  • border-image — not yet implemented.
  • Very large blur values (≥ 50 px) on small boxes may be slightly cropped at the edges. SVG filter regions clip to a bounding box that's ~3× the blur radius; bump the surrounding container if you see this.

How it's wired up

Each shadow becomes a <rect> rendered through an SVG <filter> with feGaussianBlur, layered behind (outset) or in front of (inset) the element. Spread is implemented as an outset / inset of the rect dimensions before blurring.

Border-radius percentages (50% on a square box → circle) work because Domotion reads the resolved per-corner longhand values, which Chromium has already converted to pixel radii. Mixed-style per-side borders (e.g. solid bottom + dashed top) render each side independently with the correct corner joins.

Text shadows use the same primitives as box-shadow but applied to the rendered text; multi-layer text shadows produce one filter pass per layer.