border-color
Utilities for controlling the color of an element's borders.
| Utility | Styles |
|---|---|
border.inherit | border-color: inherit; |
border.current | border-color: current; |
border.transparent | border-color: transparent; |
border.black | border-color: var(--color-black); /* #000 */ |
border.white | border-color: var(--color-white); /* #fff */ |
border[*<value>*] | border-color: *<value>*; |
border.x.inherit | border-inline-color: inherit; |
border.x.current | border-inline-color: current; |
border.x.transparent | border-inline-color: transparent; |
border.x.black | border-inline-color: var(--color-black); /* #000 */ |
border.x.white | border-inline-color: var(--color-white); /* #fff */ |
border.x[*<value>*] | border-inline-color: var(*<custom-property>*); |
border.y.inherit | border-block-color: inherit; |
border.y.current | border-block-color: current; |
border.y.transparent | border-block-color: transparent; |
border.y[*<value>*] | border-block-color: *<value>*; |
border.s.inherit | border-inline-start-color: inherit; |
border.s.current | border-inline-start-color: current; |
border.s.transparent | border-inline-start-color: transparent; |
border.s.black | border-inline-start-color: var(--color-black); /* #000 */ |
border.s.white | border-inline-start-color: var(--color-white); /* #fff */ |
border.s[*<value>*] | border-inline-start-color: *<value>*; |
border.e.inherit | border-inline-end-color: inherit; |
border.e.current | border-inline-end-color: current; |
border.e.transparent | border-inline-end-color: transparent; |
border.e[*<value>*] | border-inline-end-color: *<value>*; |
border.t.inherit | border-block-start-color: inherit; |
border.t.current | border-block-start-color: current; |
border.t.transparent | border-block-start-color: transparent; |
border.bs[*<value>*] | border-block-start-color: *<value>*; |
border.b.inherit | border-block-end-color: inherit; |
border.b.current | border-block-end-color: current; |
border.b.transparent | border-block-end-color: transparent; |
border.be[*<value>*] | border-block-end-color: *<value>*; |
border.t.black | border-top-color: var(--color-black); /* #000 */ |
border.t.white | border-top-color: var(--color-white); /* #fff */ |
border.t[*<value>*] | border-top-color: *<value>*; |
border.r.inherit | border-right-color: inherit; |
border.r.current | border-right-color: current; |
border.r.transparent | border-right-color: transparent; |
border.r.black | border-right-color: var(--color-black); /* #000 */ |
border.r.white | border-right-color: var(--color-white); /* #fff */ |
border.r[*<value>*] | border-right-color: *<value>*; |
border.b.black | border-bottom-color: var(--color-black); /* #000 */ |
border.b.white | border-bottom-color: var(--color-white); /* #fff */ |
border.b[*<value>*] | border-bottom-color: *<value>*; |
border.l.inherit | border-left-color: inherit; |
border.l.current | border-left-color: current; |
border.l.transparent | border-left-color: transparent; |
border.l[*<value>*] | border-left-color: *<value>*; |
divide.inherit | & > :not(:last-child) { border-color: inherit;} |
divide.current | & > :not(:last-child) { border-color: current;} |
divide.transparent | & > :not(:last-child) { border-color: transparent;} |
divide.black | & > :not(:last-child) { border-color: var(--color-black); /* #000 */} |
divide.white | & > :not(:last-child) { border-color: var(--color-white); /* #fff */} |
divide[*<value>*] | & > :not(:last-child) { border-color: *<value>*;} |