Skip to content
Box model

border

Draws a line around an element and defines its width, style, and color in one declaration.

3,402 effects in the catalog use this property.

Syntax

border: <width> <style> <color>;

Watch out

Under the default box model, border width is added to the declared size. Without `box-sizing: border-box`, a 1px border makes the rendered box 2px wider and taller.

Common values

1px solid rgba(255,255,255,.1)
Subtle separator
2px dashed currentColor
Dashed line that follows the current text color

Effects using border

These are working effects from the catalog. Open a tile to inspect the full source.