Border
Basic border properties. See <NuxtLink to="/docs/border-shorthand" class="c38BDF8 tdn hover-c7DD3FC">Border Shorthand</NuxtLink> for shorthand patterns.
Border None
btn, bbn, bln are not supported due to class name conflicts (e.g., btn commonly abbreviates button). For directional border removal, use Border Shorthand with b1pxsolidtransparent, etc.
Border Radius
Prefix: br + number + unit. Reset border-radius to 0 with br0. brn is border-right: 0, do not confuse.
| Class | CSS |
|---|
br0 | border-radius: 0 |
br4px | border-radius: 4px |
br8px | border-radius: 8px |
br12px | border-radius: 12px |
br50p | border-radius: 50% |
br2rem | border-radius: 2rem |
Border Width
| Prefix | Property | Example |
|---|
bw | border-width | bw1px, bw2px |
btw | border-top-width | btw1px |
brw | border-right-width | brw2px |
bbw | border-bottom-width | bbw1px |
blw | border-left-width | blw2px |
bs | border-spacing | bs2px |
Border Color
Prefix: bc + HEX6
bcDDDDDD → border-color: #DDDDDD bc6366f1 → border-color: #6366F1
Outline
| Class | CSS |
|---|
oln | outline: none |
olss | outline-style: solid |
olsd | outline-style: dashed |
olsdt | outline-style: dotted |
olsdb | outline-style: double |
olsg | outline-style: groove |
olsr | outline-style: ridge |
olsi | outline-style: inset |
olso | outline-style: outset |
olsn | outline-style: none |
Outline Width / Offset
| Prefix | Property | Example |
|---|
ow | outline-width | ow2px |
oo | outline-offset | oo4px |
Border Collapse
| Class | CSS |
|---|
bcc | border-collapse: collapse |
bcs | border-collapse: separate |