new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS v4 · all subjects

utilities/border-width

7 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-width utilities complete API

Tailwind CSS v4 provides border-width utilities with the following API: All sides: border (1px), border-<number> (<number>px), border-(length:<custom-property>) (var), border-[<value>] (custom). Horizontal sides: border-x (1px), border-x-<number> (<number>px), border-x-(length:<custom-property>) (var), border-x-[<value>] (custom). Vertical sides: border-y (1px), border-y-<number> (<number>px), border-y-(length:<custom-property>) (var), border-y-[<value>] (custom). Logical inline start: border-s (1px), border-s-<number> (<number>px), border-s-(length:<custom-property>) (var), border-s-[<value>] (custom). Logical inline end: border-e (1px), border-e-<number> (<number>px), border-e-(length:<custom-property>) (var), border-e-[<value>] (custom). Logical block start: border-bs (1px), border-bs-<number> (<number>px), border-bs-(length:<custom-property>) (var), border-bs-[<value>] (custom). Logical block end: border-be (1px), border-be-<number> (<number>px), border-be-(length:<custom-property>) (var), border-be-[<value>] (custom). Individual sides: border-t, border-r, border-b, border-l, each with -<number>, -(length:<custom-property>), and -[<value>] variants.

divide utilities for borders between children

Tailwind CSS v4 provides divide utilities to add borders between child elements. divide-x applies border-inline-end-width to all children except the last with a default of 1px. divide-x-<number> applies <number>px to the border-inline-end-width. divide-x-(length:<custom-property>) uses a custom property variable. divide-x-[<value>] uses an arbitrary value. divide-y applies border-bottom-width: 1px to all children except the last. divide-y-<number> applies <number>px. divide-y-(length:<custom-property>) uses a custom property. divide-y-[<value>] uses an arbitrary value. divide-x-reverse and divide-y-reverse set CSS custom properties to flip the direction of the border for reversed flex layouts.

border width supports custom properties with length: prefix

The border-width utilities support custom CSS properties using the length: prefix syntax: border-(length:<custom-property>) applies border-width: var(<custom-property>). This works for all border-width variants including border-x-(length:<custom-property>), border-y-(length:<custom-property>), border-t-(length:<custom-property>), etc.

border utility default width is 1px

The border utility without a number modifier applies a default border-width of 1px.

logical border properties for text direction

Tailwind CSS v4 includes logical border properties that respond to text direction. border-s (border-inline-start-width) and border-e (border-inline-end-width) map to left or right borders based on text direction (ltr or rtl). border-bs (border-block-start-width) and border-be (border-block-end-width) map to top or bottom borders based on writing mode. These accept <number>, (length:<custom-property>), and [<value>] modifiers.

divide utilities structure with :not(:last-child) selector

Divide utilities apply borders using the & > :not(:last-child) CSS selector, which targets all child elements except the last one. divide-x applies border-inline-start-width: 0px and border-inline-end-width: 1px (or custom value). divide-y applies border-top-width: 0px and border-bottom-width: 1px (or custom value).

divide-y-reverse for reversed flex layouts

When flex children are in reverse order using flex-col-reverse or flex-row-reverse, use divide-y-reverse or divide-x-reverse utilities to ensure borders are applied to the correct side of each element. These utilities set --tw-divide-x-reverse: 1 or --tw-divide-y-reverse: 1.

Give your agent this brain