utilities/border-radius

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

rounded utility class variants and CSS properties

The rounded utility has the following base variants that apply to different border radius properties: rounded (border-radius), rounded-s (border-start-start-radius and border-end-start-radius), rounded-e (border-start-end-radius and border-end-end-radius), rounded-t (border-top-left-radius and border-top-right-radius), rounded-r (border-top-right-radius and border-bottom-right-radius), rounded-b (border-bottom-right-radius and border-bottom-left-radius), rounded-l (border-top-left-radius and border-bottom-left-radius), rounded-ss (border-start-start-radius), rounded-se (border-start-end-radius), rounded-ee (border-end-end-radius), rounded-es (border-end-start-radius), rounded-tl (border-top-left-radius), rounded-tr (border-top-right-radius), rounded-br (border-bottom-right-radius), and rounded-bl (border-bottom-left-radius).

border-radius size scale values in v4

The border-radius scale in Tailwind CSS v4 includes the following sizes: xs (0.125rem / 2px using var(--radius-xs)), sm (0.25rem / 4px using var(--radius-sm)), md (0.375rem / 6px using var(--radius-md)), lg (0.5rem / 8px using var(--radius-lg)), xl (0.75rem / 12px using var(--radius-xl)), 2xl (1rem / 16px using var(--radius-2xl)), 3xl (1.5rem / 24px using var(--radius-3xl)), 4xl (2rem / 32px using var(--radius-4xl)), none (0), and full (calc(infinity * 1px)).

border-radius arbitrary values and custom properties

The border-radius utility supports custom property references using the syntax rounded-(<custom-property>) which applies var(<custom-property>) to the border radius properties, and arbitrary values using the syntax rounded-[<value>] which applies the custom <value> directly to the border radius properties.

logical property border-radius utilities

Tailwind CSS v4 provides logical property variants for border-radius: rounded-s-* (maps to rounded-l-* in LTR, rounded-r-* in RTL), rounded-e-* (maps to rounded-r-* in LTR, rounded-l-* in RTL), rounded-ss-* (maps to rounded-tl-* in LTR, rounded-tr-* in RTL), rounded-se-* (maps to rounded-tr-* in LTR, rounded-tl-* in RTL), rounded-es-* (maps to rounded-bl-* in LTR, rounded-br-* in RTL), and rounded-ee-* (maps to rounded-br-* in LTR, rounded-bl-* in RTL).

border-radius theme customization key

In Tailwind CSS v4, the border-radius utility is customized through the theme configuration using the 'radius' key.

Border radius scale renamed

In v4, border-radius utilities have been renamed: rounded-sm → rounded-xs, rounded → rounded-sm.

Give your agent this brain