Borders & outlines
Borders on every side, radius per corner, border images and focus outlines.
<div nib="d=flex; g=12px; flxw=wrap">
<div nib="w=80px; h=60px; bd=2px solid #4F52D9; bdrd=10px"></div>
<div nib="w=80px; h=60px; bdb=3px solid #0891b2; bgc=#f1f5f9; dark:bgc=#1e293b"></div>
<div nib="w=80px; h=60px; bd=2px dashed #94a3b8; bdrd=999px"></div>
<div nib="w=80px; h=60px; bgc=#fef3c7; bdrdtl=24px; bdrdbr=24px"></div>
</div>Accessible focus outlines#
<button nib="p=10px 16px; bdrd=8px; bd=1px solid #cbd5e1; bgc=#fff; cl=#0f172a; cur=pointer; otl=none; focus-visible:otl=3px solid #6468E6; focus-visible:otlo=2px">Tab to me</button>All border and outline shorthands#
Shorthand | CSS property |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|