Borders & Strokes
边框与描边
Aliases:边框描边线框边界线给元素加个框点击时那圈高亮borderoutlinering
What is it
Lines that mark an element's edge and its state. border takes up box-model space, outline paints just outside it without nudging layout, and a box-shadow ring draws a halo that costs no space. Pair a low-contrast border for quiet division with a darker hover, an outline for focus, and a recolour for errors so edges read clearly and nothing jumps.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Inputs, cards and buttons need a thin line to mark the hit area
- Hover, focus and error states need a visible cue that does not reflow
- Flat styles with no shadows rely on strokes to separate surfaces
✕ When not to use
- Thick coloured borders on every block make the page a grid of boxes
- Toggling one element between border and outline makes widths jump
- Strokes used instead of whitespace or rules to organise hierarchy
Variants
Solid border
实体边框
Counts in the box model and always takes space; pair with box-sizing: border-box
Outline
轮廓描边
Painted outside the box, offsettable, layout-neutral; first choice for focus
Shadow ring
阴影环
A 0 0 0 Npx box-shadow fakes a stroke with zero space and stackable layers
Implementation
border: 1px solid var(--color-line)box-sizing: border-boxoutline: 2px solid var(--color-accent)outline-offset: 2pxbox-shadow: 0 0 0 3px var(--color-accent-soft)Set box-sizing: border-box globally so borders count inside the declared width and a heavier stroke cannot shove neighbours. Default to a 1px --color-line; swap to --color-line-strong on hover; use outline for focus (no space, offsettable) rather than border, which would jump the element by its own width. Errors recolour semantically and add text, never colour alone. For a zero-space stroke use box-shadow: 0 0 0 3px var(--color-accent-soft).
Platform API
borderoutlinebox-shadowbox-sizingborder-radiusIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | border |
| CSS | outline |
| Tailwind CSS | border / ring |
Related concepts
A visible outline marking the currently focused element, so users know where the next keystroke will land. Pointer users rarely need it, but keyboard and assistive-tech users must always see focus or they are operating blind. Usually driven by :focus-visible — shown for keyboard focus, silent for mouse clicks.
AccessibilityUsed withA single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsUsed withA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsUsed withShadow depth expresses how far an element sits from the page: 0 rests flat, 1–2 lift, 3 and above become overlays. Each shadow stacks umbra, penumbra and ambient layers — higher levels mean larger, softer casts. Use elevation to describe stacking relations, never as ornament.
FoundationSimilarA loud visual language of thick black outlines, saturated clashing colors and hard offset shadows: elements sit on the page like bold stickers, paired with chunky radii and punchy badges. It deliberately rejects polish and subtlety, trading refinement for instant recognition and a rebellious, playful voice.
StylesUsed with