Styles

margin becomes outer space; everything else decorates the element's box — transparently, no matter the element. The model is the familiar one, outside in: margin → border → padding → content, with background filling the border-box and border-radius rounding it.

Each property has its own page below, with a live example you can edit and, where it helps, controls to drag. Lengths are px (= pt), pt, or mm (a bare number is points); colors are hex (#rgb, #rgba, #rrggbb, #rrggbbaa) or a CSS name.

Margin pushes the element away from its siblings and its container; nothing paints there — no background, no border. It is the only style: decoration that doesn't live in the element's box: the parser lifts it into an outer wrapper, so the box's own paint stays inside the margin, exactly like CSS.

Because margin is that outer space, it collapses a partial fit to "doesn't fit" — a block that only partly fits a page moves whole to the next page rather than splitting through its margin.

Unlike margin, padding is inside the box: the background fills it and the border surrounds it. It reduces the room handed to the child, then the box re-expands around the child's measured size.

The padded region is indivisible — a child that only partly fits the page yields "doesn't fit" rather than splitting a padding edge across a page break.

The fill covers the area inside the margin, under the border and padding; rounded corners clip it, and margin stays transparent around it.

Reach for an alpha color to tint content beneath — #0000001a is black at ~10% to dim a layer in a <stack>. That beats opacity when you want a translucent fill behind opaque text, since opacity would never touch the text but an alpha background reads more clearly as intent.

The border sits between margin and padding; with padding it insets the content. Per-side widths draw a single rule — style:border-bottom="1px" is an underline that reserves its own space, unlike a free-standing <line>. Each corner radius is clamped so it never exceeds half the box's shorter side, and the same radii round the fill and the clip region.

Like padding, a border makes the box indivisible across pages: a partial fit becomes "doesn't fit" rather than splitting a border edge between pages.

Set a shadow with the CSS-like shorthand or the individual shadow-* keys; the two compose, with the keys overriding parts of the shorthand. Asking for a shadow at all starts from a soft, neutral default (0 2 4, black at 30%) and applies your overrides on top.

One subtlety lives in the shorthand: an explicit box-shadow that omits the blur token means a sharp shadow — style:box-shadow="2 2" gives blur = 0, not the default. Spell out the blur ("2 2 4") to keep softness. The shadow is part of the box's own paint, so opacity fades it too.

opacity fades the element and everything inside it as a single unit. The box is rendered at full strength first — background, border, shadow, text, images, nested boxes, all of it — and then that finished picture is composited onto the page at the given alpha. This is exactly how opacity works in a browser, and it has two consequences worth knowing.

Drag the control below. The heading, the body copy, and the two overlapping chips all fade together — a child can't opt out of its parent's opacity:

1 · The whole subtree inherits it. Setting opacity on a box dims its children too — there is no way for an inner element to stay solid while its parent is faded. To fade only the background and keep text crisp, don't use opacity; give the background an alpha color instead (#1e293b80), which tints only that fill.

2 · Overlaps don't double-darken. Because the group is flattened before the alpha is applied, two overlapping shapes inside one faded box show a single flat color where they cross — not a darker band. The two chips above overlap by 30 points and stay one even blue. Put the same opacity on each chip individually instead and the overlap would composite twice and darken.

Opacity composes with clip: the clip crops the content while the opacity fades the result, so a faded, rounded, cropped card is one box. The fade covers the box's own shadow as well, just like the browser.

A box bounded smaller than its content — by a fixed width/height, a max-width/max-height, or a stretching parent — can hold more than fits. clip decides how that overflow is treated, on both axes (like CSS overflow: hidden). Toggle it on the card below:

With clip on, the child lays out at its full natural size — wider and taller than the box if it wants — and the box then crops the result to its content area (inside border and padding) on both axes: a horizontally-overflowing child is cut at the right edge, a vertically-overflowing one at the bottom, through the rounded corners, and through the middle of a line if that's where the edge falls. This is the masking tool: fixed-size thumbnails, teasers, banners.

With clip off, nothing is cut precisely. A vertically-overflowing child keeps the whole lines that fit and drops the rest; a child that can't be made to fit the box at all (no room to shrink) is dropped rather than cropped. The bottom is ragged at a line boundary rather than a clean edge, and content isn't trimmed to the rounded corners.

Clip pairs naturally with border-radius: it reuses the same clamped corner radii (shrunk by the padding inset), so an image rounds to the card's corners. It composes with opacity too — content is cropped first, then the cropped result fades as one group. Clip is about overflow, not pagination: it does not make a box splittable across pages.

All dimensions are border-box — they include the border and padding, not just the content. For each axis the box decides whether it is pinned: a width or height, or a parent that stretches it (cross="stretch"), pins the axis and the child fills it; otherwise the box shrink-wraps the child. The final size is then clamped by min-*/max-* and bounded by the space the parent offered. Any slack the clamp leaves is distributed by alignment.

A box pinned to a fixed height does not split — too-tall content is clipped with a warning (add clip to crop it on purpose). A box left to shrink-wrap, or held open only by min-height, still fragments across pages like any other block. min-height is the usual way to give cards in a row a uniform height.

Alignment only bites when there's extra room — a fixed or minimum size, or a stretching parent, left slack around the content. With no slack the child fills the box and these do nothing. center and middle both mean centered; right/bottom are the far edges, equivalent to end.

This positions the child within its own box. To distribute several children along a row or column, use the main/cross alignment of <horizontal> / <vertical> instead — that's container layout, not the box model.