Changelog

Utilities

Frequently used utilities for customizing Hummingbird.

Padding

Utilities for controlling the padding of an element.

Class Styles
p-<number> 
padding: calc(var(--spacing) * <number>);
p-px 
padding: 1px;
p-(<custom-property>) 
padding: var(<custom-property>);
p-[<value>] 
padding: <value>;
px-<number> 
padding-inline: calc(var(--spacing) * <number>);
px-px 
padding-inline: 1px;
px-(<custom-property>) 
padding-inline: var(<custom-property>);
px-[<value>] 
padding-inline: <value>;
py-<number> 
padding-block: calc(var(--spacing) * <number>);
py-px 
padding-block: 1px;
py-(<custom-property>) 
padding-block: var(<custom-property>);
py-[<value>] 
padding-block: <value>;
ps-<number> 
padding-inline-start: calc(var(--spacing) * <number>);
ps-px 
padding-inline-start: 1px;
ps-(<custom-property>) 
padding-inline-start: var(<custom-property>);
ps-[<value>] 
padding-inline-start: <value>;
pe-<number> 
padding-inline-end: calc(var(--spacing) * <number>);
pe-px 
padding-inline-end: 1px;
pe-(<custom-property>) 
padding-inline-end: var(<custom-property>);
pe-[<value>] 
padding-inline-end: <value>;
pbs-<number> 
padding-block-start: calc(var(--spacing) * <number>);
pbs-px 
padding-block-start: 1px;
pbs-(<custom-property>) 
padding-block-start: var(<custom-property>);
pbs-[<value>] 
padding-block-start: <value>;
pbe-<number> 
padding-block-end: calc(var(--spacing) * <number>);
pbe-px 
padding-block-end: 1px;
pbe-(<custom-property>) 
padding-block-end: var(<custom-property>);
pbe-[<value>] 
padding-block-end: <value>;
pt-<number> 
padding-top: calc(var(--spacing) * <number>);
pt-px 
padding-top: 1px;
pt-(<custom-property>) 
padding-top: var(<custom-property>);
pt-[<value>] 
padding-top: <value>;
pr-<number> 
padding-right: calc(var(--spacing) * <number>);
pr-px 
padding-right: 1px;
pr-(<custom-property>) 
padding-right: var(<custom-property>);
pr-[<value>] 
padding-right: <value>;
pb-<number> 
padding-bottom: calc(var(--spacing) * <number>);
pb-px 
padding-bottom: 1px;
pb-(<custom-property>) 
padding-bottom: var(<custom-property>);
pb-[<value>] 
padding-bottom: <value>;
pl-<number> 
padding-left: calc(var(--spacing) * <number>);
pl-px 
padding-left: 1px;
pl-(<custom-property>) 
padding-left: var(<custom-property>);
pl-[<value>] 
padding-left: <value>;

Margin

Utilities for controlling the margin of an element.

Class Styles
m-<number> 
margin: calc(var(--spacing) * <number>);
-m-<number> 
margin: calc(var(--spacing) * -<number>);
m-auto 
margin: auto;
m-px 
margin: 1px;
-m-px 
margin: -1px;
m-(<custom-property>) 
margin: var(<custom-property>);
m-[<value>] 
margin: <value>;
mx-<number> 
margin-inline: calc(var(--spacing) * <number>);
-mx-<number> 
margin-inline: calc(var(--spacing) * -<number>);
mx-auto 
margin-inline: auto;
mx-px 
margin-inline: 1px;
-mx-px 
margin-inline: -1px;
mx-(<custom-property>) 
margin-inline: var(<custom-property>);
mx-[<value>] 
margin-inline: <value>;
my-<number> 
margin-block: calc(var(--spacing) * <number>);
-my-<number> 
margin-block: calc(var(--spacing) * -<number>);
my-auto 
margin-block: auto;
my-px 
margin-block: 1px;
-my-px 
margin-block: -1px;
my-(<custom-property>) 
margin-block: var(<custom-property>);
my-[<value>] 
margin-block: <value>;
ms-<number> 
margin-inline-start: calc(var(--spacing) * <number>);
-ms-<number> 
margin-inline-start: calc(var(--spacing) * -<number>);
ms-auto 
margin-inline-start: auto;
ms-px 
margin-inline-start: 1px;
-ms-px 
margin-inline-start: -1px;
ms-(<custom-property>) 
margin-inline-start: var(<custom-property>);
ms-[<value>] 
margin-inline-start: <value>;
me-<number> 
margin-inline-end: calc(var(--spacing) * <number>);
-me-<number> 
margin-inline-end: calc(var(--spacing) * -<number>);
me-auto 
margin-inline-end: auto;
me-px 
margin-inline-end: 1px;
-me-px 
margin-inline-end: -1px;
me-(<custom-property>) 
margin-inline-end: var(<custom-property>);
me-[<value>] 
margin-inline-end: <value>;
mbs-<number> 
margin-block-start: calc(var(--spacing) * <number>);
-mbs-<number> 
margin-block-start: calc(var(--spacing) * -<number>);
mbs-auto 
margin-block-start: auto;
mbs-px 
margin-block-start: 1px;
-mbs-px 
margin-block-start: -1px;
mbs-(<custom-property>) 
margin-block-start: var(<custom-property>);
mbs-[<value>] 
margin-block-start: <value>;
mbe-<number> 
margin-block-end: calc(var(--spacing) * <number>);
-mbe-<number> 
margin-block-end: calc(var(--spacing) * -<number>);
mbe-auto 
margin-block-end: auto;
mbe-px 
margin-block-end: 1px;
-mbe-px 
margin-block-end: -1px;
mbe-(<custom-property>) 
margin-block-end: var(<custom-property>);
mbe-[<value>] 
margin-block-end: <value>;
mt-<number> 
margin-top: calc(var(--spacing) * <number>);
-mt-<number> 
margin-top: calc(var(--spacing) * -<number>);
mt-auto 
margin-top: auto;
mt-px 
margin-top: 1px;
-mt-px 
margin-top: -1px;
mt-(<custom-property>) 
margin-top: var(<custom-property>);
mt-[<value>] 
margin-top: <value>;
mr-<number> 
margin-right: calc(var(--spacing) * <number>);
-mr-<number> 
margin-right: calc(var(--spacing) * -<number>);
mr-auto 
margin-right: auto;
mr-px 
margin-right: 1px;
-mr-px 
margin-right: -1px;
mr-(<custom-property>) 
margin-right: var(<custom-property>);
mr-[<value>] 
margin-right: <value>;
mb-<number> 
margin-bottom: calc(var(--spacing) * <number>);
-mb-<number> 
margin-bottom: calc(var(--spacing) * -<number>);
mb-auto 
margin-bottom: auto;
mb-px 
margin-bottom: 1px;
-mb-px 
margin-bottom: -1px;
mb-(<custom-property>) 
margin-bottom: var(<custom-property>);
mb-[<value>] 
margin-bottom: <value>;
ml-<number> 
margin-left: calc(var(--spacing) * <number>);
-ml-<number> 
margin-left: calc(var(--spacing) * -<number>);
ml-auto 
margin-left: auto;
ml-px 
margin-left: 1px;
-ml-px 
margin-left: -1px;
ml-(<custom-property>) 
margin-left: var(<custom-property>);
ml-[<value>] 
margin-left: <value>;
space-x-<number> 
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-x-reverse)));
};
-space-x-<number> 
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * -<number>) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-space-x-reverse)));
};
space-x-px 
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(1px * var(--tw-space-x-reverse));
  margin-inline-end: calc(1px * calc(1 - var(--tw-space-x-reverse)));
};
-space-x-px 
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
  margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
};
space-x-(<custom-property>) 
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(var(<custom-property>) * var(--tw-space-x-reverse));
  margin-inline-end: calc(var(<custom-property>) * calc(1 - var(--tw-space-x-reverse)));
};
space-x-[<value>] 
& > :not(:last-child) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(<value> * var(--tw-space-x-reverse));
  margin-inline-end: calc(<value> * calc(1 - var(--tw-space-x-reverse)));
};
space-y-<number> 
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-y-reverse)));
};
-space-y-<number> 
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * -<number>) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-space-y-reverse)));
};
space-y-px 
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(1px * var(--tw-space-y-reverse));
  margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)));
};
-space-y-px 
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(-1px * var(--tw-space-y-reverse));
  margin-block-end: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
};
space-y-(<custom-property>) 
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(var(<custom-property>) * var(--tw-space-y-reverse));
  margin-block-end: calc(var(<custom-property>) * calc(1 - var(--tw-space-y-reverse)));
};
space-y-[<value>] 
& > :not(:last-child) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(<value> * var(--tw-space-y-reverse));
  margin-block-end: calc(<value> * calc(1 - var(--tw-space-y-reverse)));
};
space-x-reverse 
& > :not(:last-child)) {
  --tw-space-x-reverse: 1;
}
space-y-reverse 
& > :not(:last-child)) {
  --tw-space-y-reverse: 1;
}

Font Family

Utilities for controlling the font family of an element.

Class Styles
font-sans 
font-family: var(--font-sans); /* 'Figtree', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */
font-serif 
font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */
font-mono 
font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */
font-(family-name:<custom-property>) 
font-family: var(<custom-property>);
font-[<value>] 
font-family: <value>;

Font Size

Utilities for controlling the font size of an element.

Class Styles
text-xs 
font-size: var(--text-xs); /* 0.75rem (12px) */ 
line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */
text-sm 
font-size: var(--text-sm); /* 0.875rem (14px) */ 
line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */
text-base 
font-size: var(--text-base); /* 1rem (16px) */ 
line-height: var(--text-base--line-height); /* calc(1.5 / 1) */
text-lg 
font-size: var(--text-lg); /* 1.125rem (18px) */ 
line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */
text-xl 
font-size: var(--text-xl); /* 1.25rem (20px) */ 
line-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */
text-2xl 
font-size: var(--text-2xl); /* 1.5rem (24px) */ 
line-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */
text-3xl 
font-size: var(--text-3xl); /* 1.875rem (30px) */ 
line-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */
text-4xl 
font-size: var(--text-4xl); /* 2.25rem (36px) */ 
line-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */
text-5xl 
font-size: var(--text-5xl); /* 3rem (48px) */ 
line-height: var(--text-5xl--line-height); /* 1 */
text-6xl 
font-size: var(--text-6xl); /* 3.75rem (60px) */ 
line-height: var(--text-6xl--line-height); /* 1 */
text-7xl 
font-size: var(--text-7xl); /* 4.5rem (72px) */ 
line-height: var(--text-7xl--line-height); /* 1 */
text-8xl 
font-size: var(--text-8xl); /* 6rem (96px) */ 
line-height: var(--text-8xl--line-height); /* 1 */
text-9xl 
font-size: var(--text-9xl); /* 8rem (128px) */ 
line-height: var(--text-9xl--line-height); /* 1 */
text-(length:<custom-property>) 
font-size: var(<custom-property>);
text-[<value>] 
font-size: <value>;

Font Weight

Utilities for controlling the font weight of an element.

Class Styles
font-thin 
font-weight: 100;
font-extralight 
font-weight: 200;
font-light 
font-weight: 300;
font-normal 
font-weight: 400;
font-medium 
font-weight: 500;
font-semibold 
font-weight: 600;
font-bold 
font-weight: 700;
font-extrabold 
font-weight: 800;
font-black 
font-weight: 900;
font-(<custom-property>) 
font-weight: var(<custom-property>);
font-[<value>] 
font-weight: <value>;

Line Height

Utilities for controlling the line height of an element.

Class Styles
text-<size>/<number> 
font-size: <size>;
line-height: calc(var(--spacing) * <number>);
text-<size>/(<custom-property>) 
font-size: <size>;
line-height: var(<custom-property>);
text-<size>/[<value>] 
font-size: <size>;
line-height: <value>;
leading-none 
line-height: 1;
leading-<number> 
line-height: calc(var(--spacing) * <number>);
leading-(<custom-property>) 
line-height: var(<custom-property>);
leading-[<value>] 
line-height: <value>;

Border Radius

Utilities for controlling the border radius of an element.

Class Styles
rounded-xs 
border-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-sm 
border-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-md 
border-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-lg 
border-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-xl 
border-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-2xl 
border-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-3xl 
border-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-4xl 
border-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-none 
border-radius: 0;
rounded-full 
border-radius: calc(infinity * 1px);
rounded-(<custom-property>) 
border-radius: var(<custom-property>);
rounded-[<value>] 
border-radius: <value>;
rounded-s-xs 
border-start-start-radius: var(--radius-xs); /* 0.125rem (2px) */
border-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-s-sm 
border-start-start-radius: var(--radius-sm); /* 0.25rem (4px) */
border-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-s-md 
border-start-start-radius: var(--radius-md); /* 0.375rem (6px) */
border-end-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-s-lg 
border-start-start-radius: var(--radius-lg); /* 0.5rem (8px) */
border-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-s-xl 
border-start-start-radius: var(--radius-xl); /* 0.75rem (12px) */
border-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-s-2xl 
border-start-start-radius: var(--radius-2xl); /* 1rem (16px) */
border-end-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-s-3xl 
border-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-s-4xl 
border-start-start-radius: var(--radius-4xl); /* 2rem (32px) */
border-end-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-s-none 
border-start-start-radius: 0;
border-end-start-radius: 0;
rounded-s-full 
border-start-start-radius: calc(infinity * 1px);
border-end-start-radius: calc(infinity * 1px);
rounded-s-(<custom-property>) 
border-start-start-radius: var(<custom-property>);
border-end-start-radius: var(<custom-property>);
rounded-s-[<value>] 
border-start-start-radius: <value>;
border-end-start-radius: <value>;
rounded-e-xs 
border-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */
border-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-e-sm 
border-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */
border-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-e-md 
border-start-end-radius: var(--radius-md); /* 0.375rem (6px) */
border-end-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-e-lg 
border-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */
border-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-e-xl 
border-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */
border-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-e-2xl 
border-start-end-radius: var(--radius-2xl); /* 1rem (16px) */
border-end-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-e-3xl 
border-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-e-4xl 
border-start-end-radius: var(--radius-4xl); /* 2rem (32px) */
border-end-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-e-none 
border-start-end-radius: 0;
border-end-end-radius: 0;
rounded-e-full 
border-start-end-radius: calc(infinity * 1px);
border-end-end-radius: calc(infinity * 1px);
rounded-e-(<custom-property>) 
border-start-end-radius: var(<custom-property>);
border-end-end-radius: var(<custom-property>);
rounded-e-[<value>] 
border-start-end-radius: <value>;
border-end-end-radius: <value>;
rounded-t-xs 
border-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */
border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-t-sm 
border-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */
border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-t-md 
border-top-left-radius: var(--radius-md); /* 0.375rem (6px) */
border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-t-lg 
border-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */
border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-t-xl 
border-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */
border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-t-2xl 
border-top-left-radius: var(--radius-2xl); /* 1rem (16px) */
border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-t-3xl 
border-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-t-4xl 
border-top-left-radius: var(--radius-4xl); /* 2rem (32px) */
border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-t-none 
border-top-left-radius: 0;
border-top-right-radius: 0;
rounded-t-full 
border-top-left-radius: calc(infinity * 1px);
border-top-right-radius: calc(infinity * 1px);
rounded-t-(<custom-property>) 
border-top-left-radius: var(<custom-property>);
border-top-right-radius: var(<custom-property>);
rounded-t-[<value>] 
border-top-left-radius: <value>;
border-top-right-radius: <value>;
rounded-r-xs 
border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */
border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-r-sm 
border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */
border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-r-md 
border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */
border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-r-lg 
border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */
border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-r-xl 
border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */
border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-r-2xl 
border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */
border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-r-3xl 
border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-r-4xl 
border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */
border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-r-none 
border-top-right-radius: 0;
border-bottom-right-radius: 0;
rounded-r-full 
border-top-right-radius: calc(infinity * 1px);
border-bottom-right-radius: calc(infinity * 1px);
rounded-r-(<custom-property>) 
border-top-right-radius: var(<custom-property>);
border-bottom-right-radius: var(<custom-property>);
rounded-r-[<value>] 
border-top-right-radius: <value>;
border-bottom-right-radius: <value>;
rounded-b-xs 
border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */
border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-b-sm 
border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */
border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-b-md 
border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */
border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-b-lg 
border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */
border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-b-xl 
border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */
border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-b-2xl 
border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */
border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-b-3xl 
border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-b-4xl 
border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */
border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-b-none 
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
rounded-b-full 
border-bottom-right-radius: calc(infinity * 1px);
border-bottom-left-radius: calc(infinity * 1px);
rounded-b-(<custom-property>) 
border-bottom-right-radius: var(<custom-property>);
border-bottom-left-radius: var(<custom-property>);
rounded-b-[<value>] 
border-bottom-right-radius: <value>;
border-bottom-left-radius: <value>;
rounded-l-xs 
border-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */
border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-l-sm 
border-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */
border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-l-md 
border-top-left-radius: var(--radius-md); /* 0.375rem (6px) */
border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-l-lg 
border-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */
border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-l-xl 
border-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */
border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-l-2xl 
border-top-left-radius: var(--radius-2xl); /* 1rem (16px) */
border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-l-3xl 
border-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-l-4xl 
border-top-left-radius: var(--radius-4xl); /* 2rem (32px) */
border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-l-none 
border-top-left-radius: 0;
border-bottom-left-radius: 0;
rounded-l-full 
border-top-left-radius: calc(infinity * 1px);
border-bottom-left-radius: calc(infinity * 1px);
rounded-l-(<custom-property>) 
border-top-left-radius: var(<custom-property>);
border-bottom-left-radius: var(<custom-property>);
rounded-l-[<value>] 
border-top-left-radius: <value>;
border-bottom-left-radius: <value>;
rounded-ss-xs 
border-start-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-ss-sm 
border-start-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-ss-md 
border-start-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-ss-lg 
border-start-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-ss-xl 
border-start-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-ss-2xl 
border-start-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-ss-3xl 
border-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-ss-4xl 
border-start-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-ss-none 
border-start-start-radius: 0;
rounded-ss-full 
border-start-start-radius: calc(infinity * 1px);
rounded-ss-(<custom-property>) 
border-start-start-radius: var(<custom-property>);
rounded-ss-[<value>] 
border-start-start-radius: <value>;
rounded-se-xs 
border-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-se-sm 
border-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-se-md 
border-start-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-se-lg 
border-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-se-xl 
border-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-se-2xl 
border-start-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-se-3xl 
border-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-se-4xl 
border-start-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-se-none 
border-start-end-radius: 0;
rounded-se-full 
border-start-end-radius: calc(infinity * 1px);
rounded-se-(<custom-property>) 
border-start-end-radius: var(<custom-property>);
rounded-se-[<value>] 
border-start-end-radius: <value>;
rounded-ee-xs 
border-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-ee-sm 
border-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-ee-md 
border-end-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-ee-lg 
border-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-ee-xl 
border-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-ee-2xl 
border-end-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-ee-3xl 
border-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-ee-4xl 
border-end-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-ee-none 
border-end-end-radius: 0;
rounded-ee-full 
border-end-end-radius: calc(infinity * 1px);
rounded-ee-(<custom-property>) 
border-end-end-radius: var(<custom-property>);
rounded-ee-[<value>] 
border-end-end-radius: <value>;
rounded-es-xs 
border-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-es-sm 
border-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-es-md 
border-end-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-es-lg 
border-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-es-xl 
border-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-es-2xl 
border-end-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-es-3xl 
border-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-es-4xl 
border-end-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-es-none 
border-end-start-radius: 0;
rounded-es-full 
border-end-start-radius: calc(infinity * 1px);
rounded-es-(<custom-property>) 
border-end-start-radius: var(<custom-property>);
rounded-es-[<value>] 
border-end-start-radius: <value>;
rounded-tl-xs 
border-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-tl-sm 
border-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-tl-md 
border-top-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-tl-lg 
border-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-tl-xl 
border-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-tl-2xl 
border-top-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-tl-3xl 
border-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-tl-4xl 
border-top-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-tl-none 
border-top-left-radius: 0;
rounded-tl-full 
border-top-left-radius: calc(infinity * 1px);
rounded-tl-(<custom-property>) 
border-top-left-radius: var(<custom-property>);
rounded-tl-[<value>] 
border-top-left-radius: <value>;
rounded-tr-xs 
border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-tr-sm 
border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-tr-md 
border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-tr-lg 
border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-tr-xl 
border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-tr-2xl 
border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-tr-3xl 
border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-tr-4xl 
border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-tr-none 
border-top-right-radius: 0;
rounded-tr-full 
border-top-right-radius: calc(infinity * 1px);
rounded-tr-(<custom-property>) 
border-top-right-radius: var(<custom-property>);
rounded-tr-[<value>] 
border-top-right-radius: <value>;
rounded-br-xs 
border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-br-sm 
border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-br-md 
border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-br-lg 
border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-br-xl 
border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-br-2xl 
border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-br-3xl 
border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-br-4xl 
border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-br-none 
border-bottom-right-radius: 0;
rounded-br-full 
border-bottom-right-radius: calc(infinity * 1px);
rounded-br-(<custom-property>) 
border-bottom-right-radius: var(<custom-property>);
rounded-br-[<value>] 
border-bottom-right-radius: <value>;
rounded-bl-xs 
border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-bl-sm 
border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-bl-md 
border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-bl-lg 
border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-bl-xl 
border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-bl-2xl 
border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-bl-3xl 
border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-bl-4xl 
border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-bl-none 
border-bottom-left-radius: 0;
rounded-bl-full 
border-bottom-left-radius: calc(infinity * 1px);
rounded-bl-(<custom-property>) 
border-bottom-left-radius: var(<custom-property>);
rounded-bl-[<value>] 
border-bottom-left-radius: <value>;
Previous

Reboot
Next

Container