Tailwind CSS · Utilities reference · all subjects

border-width

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

border utility classes and CSS output

The border-width utilities produce the following CSS: border (border-width: 1px), border-<number> (border-width: <number>px), border-(length:<custom-property>) (border-width: var(<custom-property>)), border-[<value>] (border-width: <value>).

border-x and border-y utility classes and CSS output

The border-x utilities set border-inline-width: border (border-inline-width: 1px), border-x-<number> (border-inline-width: <number>px), border-x-(length:<custom-property>) (border-inline-width: var(<custom-property>)), border-x-[<value>] (border-inline-width: <value>). The border-y utilities set border-block-width: border-y (border-block-width: 1px), border-y-<number> (border-block-width: <number>px), border-y-(length:<custom-property>) (border-block-width: var(<custom-property>)), border-y-[<value>] (border-block-width: <value>).

border-s and border-e utility classes (logical properties)

The border-s utilities set border-inline-start-width using logical properties: border-s (border-inline-start-width: 1px), border-s-<number> (border-inline-start-width: <number>px), border-s-(length:<custom-property>) (border-inline-start-width: var(<custom-property>)), border-s-[<value>] (border-inline-start-width: <value>). The border-e utilities set border-inline-end-width: border-e (border-inline-end-width: 1px), border-e-<number> (border-inline-end-width: <number>px), border-e-(length:<custom-property>) (border-inline-end-width: var(<custom-property>)), border-e-[<value>] (border-inline-end-width: <value>).

border-bs and border-be utility classes (block start/end)

The border-bs utilities set border-block-start-width: border-bs (border-block-start-width: 1px), border-bs-<number> (border-block-start-width: <number>px), border-bs-(length:<custom-property>) (border-block-start-width: var(<custom-property>)), border-bs-[<value>] (border-block-start-width: <value>). The border-be utilities set border-block-end-width: border-be (border-block-end-width: 1px), border-be-<number> (border-block-end-width: <number>px), border-be-(length:<custom-property>) (border-block-end-width: var(<custom-property>)), border-be-[<value>] (border-block-end-width: <value>).

border-t, border-r, border-b, border-l utility classes

The border-t utilities set border-top-width: border-t (border-top-width: 1px), border-t-<number> (border-top-width: <number>px), border-t-(length:<custom-property>) (border-top-width: var(<custom-property>)), border-t-[<value>] (border-top-width: <value>). The border-r utilities set border-right-width: border-r (border-right-width: 1px), border-r-<number> (border-right-width: <number>px), border-r-(length:<custom-property>) (border-right-width: var(<custom-property>)), border-r-[<value>] (border-right-width: <value>). The border-b utilities set border-bottom-width: border-b (border-bottom-width: 1px), border-b-<number> (border-bottom-width: <number>px), border-b-(length:<custom-property>) (border-bottom-width: var(<custom-property>)), border-b-[<value>] (border-bottom-width: <value>). The border-l utilities set border-left-width: border-l (border-left-width: 1px), border-l-<number> (border-left-width: <number>px), border-l-(length:<custom-property>) (border-left-width: var(<custom-property>)), border-l-[<value>] (border-left-width: <value>).

divide-y utility classes for borders between children

The divide-y utilities add borders between child elements on the y-axis: divide-y (& > :not(:last-child) { border-top-width: 0px; border-bottom-width: 1px; }), divide-y-<number> (& > :not(:last-child) { border-top-width: 0px; border-bottom-width: <number>px; }), divide-y-(length:<custom-property>) (& > :not(:last-child) { border-top-width: 0px; border-bottom-width: var(<custom-property>); }), divide-y-[<value>] (& > :not(:last-child) { border-top-width: 0px; border-bottom-width: <value>; }).

divide-x-reverse and divide-y-reverse utilities

The divide-x-reverse utility sets --tw-divide-x-reverse: 1; and divide-y-reverse utility sets --tw-divide-y-reverse: 1;. These are used to ensure borders are added to the correct side of each element when children are in reverse order (using flex-row-reverse or flex-col-reverse).

border width custom value syntax

Border width supports custom values using the syntax border-[<value>], where <value> can be any valid length value. For example, border-[2vw] sets border-width: 2vw;. Custom properties can be referenced using border-(length:<custom-property>).

border utility responsive design support

Border-width utilities support responsive design variants. For example, border-2 and border-t-4 can be prefixed with responsive breakpoint modifiers to apply different border widths at different screen sizes.

Give your agent this brain