Borders

border-radius

Name: Fynydd
Address: 630 Freedom Business Center Drive, King of Prussia, Pennsylvania, 19406, United States
Telephone: +1 855-439-6933
Rating: 4.9

Utilities for setting border radius for rounded corners.

Quick reference

Class Styles

rounded-xs

border-radius: var(--radius-xs);/* 0.125rem */

rounded-sm

border-radius: var(--radius-sm);/* 0.25rem */

rounded-md

border-radius: var(--radius-md);/* 0.375rem */

rounded-lg

border-radius: var(--radius-lg);/* 0.5rem */

rounded-xl

border-radius: var(--radius-xl);/* 0.75rem */

rounded-2xl

border-radius: var(--radius-2xl);/* 1rem */

rounded-3xl

border-radius: var(--radius-3xl);/* 1.5rem */

rounded-4xl

border-radius: var(--radius-4xl);/* 2rem */

rounded-none

border-radius: 0;

rounded-full

border-radius: calc(infinity * 1px);

rounded

border-radius: var(--radius-sm);/* 0.25rem */

rounded-s-xs

border-start-start-radius: var(--radius-xs);/* 0.125rem */
border-end-start-radius: var(--radius-xs);/* 0.125rem */

rounded-s-sm

border-start-start-radius: var(--radius-sm);/* 0.25rem */
border-end-start-radius: var(--radius-sm);/* 0.25rem */

rounded-s-md

border-start-start-radius: var(--radius-md);/* 0.375rem */
border-end-start-radius: var(--radius-md);/* 0.375rem */

rounded-s-lg

border-start-start-radius: var(--radius-lg);/* 0.5rem */
border-end-start-radius: var(--radius-lg);/* 0.5rem */

rounded-s-xl

border-start-start-radius: var(--radius-xl);/* 0.75rem */
border-end-start-radius: var(--radius-xl);/* 0.75rem */

rounded-s-2xl

border-start-start-radius: var(--radius-2xl);/* 1rem */
border-end-start-radius: var(--radius-2xl);/* 1rem */

rounded-s-3xl

border-start-start-radius: var(--radius-3xl);/* 1.5rem */
border-end-start-radius: var(--radius-3xl);/* 1.5rem */

rounded-s-4xl

border-start-start-radius: var(--radius-4xl);/* 2rem */
border-end-start-radius: var(--radius-4xl);/* 2rem */

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

border-start-start-radius: var(--radius-sm);/* 0.25rem */
border-end-start-radius: var(--radius-sm);/* 0.25rem */

rounded-e-xs

border-start-end-radius: var(--radius-xs);/* 0.125rem */
border-end-end-radius: var(--radius-xs);/* 0.125rem */

rounded-e-sm

border-start-end-radius: var(--radius-sm);/* 0.25rem */
border-end-end-radius: var(--radius-sm);/* 0.25rem */

rounded-e-md

border-start-end-radius: var(--radius-md);/* 0.375rem */
border-end-end-radius: var(--radius-md);/* 0.375rem */

rounded-e-lg

border-start-end-radius: var(--radius-lg);/* 0.5rem */
border-end-end-radius: var(--radius-lg);/* 0.5rem */

rounded-e-xl

border-start-end-radius: var(--radius-xl);/* 0.75rem */
border-end-end-radius: var(--radius-xl);/* 0.75rem */

rounded-e-2xl

border-start-end-radius: var(--radius-2xl);/* 1rem */
border-end-end-radius: var(--radius-2xl);/* 1rem */

rounded-e-3xl

border-start-end-radius: var(--radius-3xl);/* 1.5rem */
border-end-end-radius: var(--radius-3xl);/* 1.5rem */

rounded-e-4xl

border-start-end-radius: var(--radius-4xl);/* 2rem */
border-end-end-radius: var(--radius-4xl);/* 2rem */

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

border-start-end-radius: var(--radius-sm);/* 0.25rem */
border-end-end-radius: var(--radius-sm);/* 0.25rem */

rounded-t-xs

border-top-left-radius: var(--radius-xs);/* 0.125rem */
border-top-right-radius: var(--radius-xs);/* 0.125rem */

rounded-t-sm

border-top-left-radius: var(--radius-sm);/* 0.25rem */
border-top-right-radius: var(--radius-sm);/* 0.25rem */

rounded-t-md

border-top-left-radius: var(--radius-md);/* 0.375rem */
border-top-right-radius: var(--radius-md);/* 0.375rem */

rounded-t-lg

border-top-left-radius: var(--radius-lg);/* 0.5rem */
border-top-right-radius: var(--radius-lg);/* 0.5rem */

rounded-t-xl

border-top-left-radius: var(--radius-xl);/* 0.75rem */
border-top-right-radius: var(--radius-xl);/* 0.75rem */

rounded-t-2xl

border-top-left-radius: var(--radius-2xl);/* 1rem */
border-top-right-radius: var(--radius-2xl);/* 1rem */

rounded-t-3xl

border-top-left-radius: var(--radius-3xl);/* 1.5rem */
border-top-right-radius: var(--radius-3xl);/* 1.5rem */

rounded-t-4xl

border-top-left-radius: var(--radius-4xl);/* 2rem */
border-top-right-radius: var(--radius-4xl);/* 2rem */

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

border-top-left-radius: var(--radius-sm);/* 0.25rem */
border-top-right-radius: var(--radius-sm);/* 0.25rem */

rounded-r-xs

border-top-right-radius: var(--radius-xs);/* 0.125rem */
border-bottom-right-radius: var(--radius-xs);/* 0.125rem */

rounded-r-sm

border-top-right-radius: var(--radius-sm);/* 0.25rem */
border-bottom-right-radius: var(--radius-sm);/* 0.25rem */

rounded-r-md

border-top-right-radius: var(--radius-md);/* 0.375rem */
border-bottom-right-radius: var(--radius-md);/* 0.375rem */

rounded-r-lg

border-top-right-radius: var(--radius-lg);/* 0.5rem */
border-bottom-right-radius: var(--radius-lg);/* 0.5rem */

rounded-r-xl

border-top-right-radius: var(--radius-xl);/* 0.75rem */
border-bottom-right-radius: var(--radius-xl);/* 0.75rem */

rounded-r-2xl

border-top-right-radius: var(--radius-2xl);/* 1rem */
border-bottom-right-radius: var(--radius-2xl);/* 1rem */

rounded-r-3xl

border-top-right-radius: var(--radius-3xl);/* 1.5rem */
border-bottom-right-radius: var(--radius-3xl);/* 1.5rem */

rounded-r-4xl

border-top-right-radius: var(--radius-4xl);/* 2rem */
border-bottom-right-radius: var(--radius-4xl);/* 2rem */

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

border-top-right-radius: var(--radius-sm);/* 0.25rem */
border-bottom-right-radius: var(--radius-sm);/* 0.25rem */

rounded-b-xs

border-bottom-right-radius: var(--radius-xs);/* 0.125rem */
border-bottom-left-radius: var(--radius-xs);/* 0.125rem */

rounded-b-sm

border-bottom-right-radius: var(--radius-sm);/* 0.25rem */
border-bottom-left-radius: var(--radius-sm);/* 0.25rem */

rounded-b-md

border-bottom-right-radius: var(--radius-md);/* 0.375rem */
border-bottom-left-radius: var(--radius-md);/* 0.375rem */

rounded-b-lg

border-bottom-right-radius: var(--radius-lg);/* 0.5rem */
border-bottom-left-radius: var(--radius-lg);/* 0.5rem */

rounded-b-xl

border-bottom-right-radius: var(--radius-xl);/* 0.75rem */
border-bottom-left-radius: var(--radius-xl);/* 0.75rem */

rounded-b-2xl

border-bottom-right-radius: var(--radius-2xl);/* 1rem */
border-bottom-left-radius: var(--radius-2xl);/* 1rem */

rounded-b-3xl

border-bottom-right-radius: var(--radius-3xl);/* 1.5rem */
border-bottom-left-radius: var(--radius-3xl);/* 1.5rem */

rounded-b-4xl

border-bottom-right-radius: var(--radius-4xl);/* 2rem */
border-bottom-left-radius: var(--radius-4xl);/* 2rem */

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

border-bottom-right-radius: var(--radius-sm);/* 0.25rem */
border-bottom-left-radius: var(--radius-sm);/* 0.25rem */

rounded-l-xs

border-top-left-radius: var(--radius-xs);/* 0.125rem */
border-bottom-left-radius: var(--radius-xs);/* 0.125rem */

rounded-l-sm

border-top-left-radius: var(--radius-sm);/* 0.25rem */
border-bottom-left-radius: var(--radius-sm);/* 0.25rem */

rounded-l-md

border-top-left-radius: var(--radius-md);/* 0.375rem */
border-bottom-left-radius: var(--radius-md);/* 0.375rem */

rounded-l-lg

border-top-left-radius: var(--radius-lg);/* 0.5rem */
border-bottom-left-radius: var(--radius-lg);/* 0.5rem */

rounded-l-xl

border-top-left-radius: var(--radius-xl);/* 0.75rem */
border-bottom-left-radius: var(--radius-xl);/* 0.75rem */

rounded-l-2xl

border-top-left-radius: var(--radius-2xl);/* 1rem */
border-bottom-left-radius: var(--radius-2xl);/* 1rem */

rounded-l-3xl

border-top-left-radius: var(--radius-3xl);/* 1.5rem */
border-bottom-left-radius: var(--radius-3xl);/* 1.5rem */

rounded-l-4xl

border-top-left-radius: var(--radius-4xl);/* 2rem */
border-bottom-left-radius: var(--radius-4xl);/* 2rem */

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

border-top-left-radius: var(--radius-sm);/* 0.25rem */
border-bottom-left-radius: var(--radius-sm);/* 0.25rem */

rounded-ss-xs

border-start-start-radius: var(--radius-xs);/* 0.125rem */

rounded-ss-sm

border-start-start-radius: var(--radius-sm);/* 0.25rem */

rounded-ss-md

border-start-start-radius: var(--radius-md);/* 0.375rem */

rounded-ss-lg

border-start-start-radius: var(--radius-lg);/* 0.5rem */

rounded-ss-xl

border-start-start-radius: var(--radius-xl);/* 0.75rem */

rounded-ss-2xl

border-start-start-radius: var(--radius-2xl);/* 1rem */

rounded-ss-3xl

border-start-start-radius: var(--radius-3xl);/* 1.5rem */

rounded-ss-4xl

border-start-start-radius: var(--radius-4xl);/* 2rem */

rounded-ss-none

border-start-start-radius: 0;

rounded-ss-full

border-start-start-radius: calc(infinity * 1px);

rounded-ss

border-start-start-radius: var(--radius-sm);/* 0.25rem */

rounded-se-xs

border-start-end-radius: var(--radius-xs);/* 0.125rem */

rounded-se-sm

border-start-end-radius: var(--radius-sm);/* 0.25rem */

rounded-se-md

border-start-end-radius: var(--radius-md);/* 0.375rem */

rounded-se-lg

border-start-end-radius: var(--radius-lg);/* 0.5rem */

rounded-se-xl

border-start-end-radius: var(--radius-xl);/* 0.75rem */

rounded-se-2xl

border-start-end-radius: var(--radius-2xl);/* 1rem */

rounded-se-3xl

border-start-end-radius: var(--radius-3xl);/* 1.5rem */

rounded-se-4xl

border-start-end-radius: var(--radius-4xl);/* 2rem */

rounded-se-none

border-start-end-radius: 0;

rounded-se-full

border-start-end-radius: calc(infinity * 1px);

rounded-se

border-start-end-radius: var(--radius-sm);/* 0.25rem */

rounded-ee-xs

border-end-end-radius: var(--radius-xs);/* 0.125rem */

rounded-ee-sm

border-end-end-radius: var(--radius-sm);/* 0.25rem */

rounded-ee-md

border-end-end-radius: var(--radius-md);/* 0.375rem */

rounded-ee-lg

border-end-end-radius: var(--radius-lg);/* 0.5rem */

rounded-ee-xl

border-end-end-radius: var(--radius-xl);/* 0.75rem */

rounded-ee-2xl

border-end-end-radius: var(--radius-2xl);/* 1rem */

rounded-ee-3xl

border-end-end-radius: var(--radius-3xl);/* 1.5rem */

rounded-ee-4xl

border-end-end-radius: var(--radius-4xl);/* 2rem */

rounded-ee-none

border-end-end-radius: 0;

rounded-ee-full

border-end-end-radius: calc(infinity * 1px);

rounded-ee

border-end-end-radius: var(--radius-sm);/* 0.25rem */

rounded-es-xs

border-end-start-radius: var(--radius-xs);/* 0.125rem */

rounded-es-sm

border-end-start-radius: var(--radius-sm);/* 0.25rem */

rounded-es-md

border-end-start-radius: var(--radius-md);/* 0.375rem */

rounded-es-lg

border-end-start-radius: var(--radius-lg);/* 0.5rem */

rounded-es-xl

border-end-start-radius: var(--radius-xl);/* 0.75rem */

rounded-es-2xl

border-end-start-radius: var(--radius-2xl);/* 1rem */

rounded-es-3xl

border-end-start-radius: var(--radius-3xl);/* 1.5rem */

rounded-es-4xl

border-end-start-radius: var(--radius-4xl);/* 2rem */

rounded-es-none

border-end-start-radius: 0;

rounded-es-full

border-end-start-radius: calc(infinity * 1px);

rounded-es

border-end-start-radius: var(--radius-sm);/* 0.25rem */

rounded-tl-xs

border-top-left-radius: var(--radius-xs);/* 0.125rem */

rounded-tl-sm

border-top-left-radius: var(--radius-sm);/* 0.25rem */

rounded-tl-md

border-top-left-radius: var(--radius-md);/* 0.375rem */

rounded-tl-lg

border-top-left-radius: var(--radius-lg);/* 0.5rem */

rounded-tl-xl

border-top-left-radius: var(--radius-xl);/* 0.75rem */

rounded-tl-2xl

border-top-left-radius: var(--radius-2xl);/* 1rem */

rounded-tl-3xl

border-top-left-radius: var(--radius-3xl);/* 1.5rem */

rounded-tl-4xl

border-top-left-radius: var(--radius-4xl);/* 2rem */

rounded-tl-none

border-top-left-radius: 0;

rounded-tl-full

border-top-left-radius: calc(infinity * 1px);

rounded-tl

border-top-left-radius: var(--radius-sm);/* 0.25rem */

rounded-tr-xs

border-top-right-radius: var(--radius-xs);/* 0.125rem */

rounded-tr-sm

border-top-right-radius: var(--radius-sm);/* 0.25rem */

rounded-tr-md

border-top-right-radius: var(--radius-md);/* 0.375rem */

rounded-tr-lg

border-top-right-radius: var(--radius-lg);/* 0.5rem */

rounded-tr-xl

border-top-right-radius: var(--radius-xl);/* 0.75rem */

rounded-tr-2xl

border-top-right-radius: var(--radius-2xl);/* 1rem */

rounded-tr-3xl

border-top-right-radius: var(--radius-3xl);/* 1.5rem */

rounded-tr-4xl

border-top-right-radius: var(--radius-4xl);/* 2rem */

rounded-tr-none

border-top-right-radius: 0;

rounded-tr-full

border-top-right-radius: calc(infinity * 1px);

rounded-tr

border-top-right-radius: var(--radius-sm);/* 0.25rem */

rounded-br-xs

border-bottom-right-radius: var(--radius-xs);/* 0.125rem */

rounded-br-sm

border-bottom-right-radius: var(--radius-sm);/* 0.25rem */

rounded-br-md

border-bottom-right-radius: var(--radius-md);/* 0.375rem */

rounded-br-lg

border-bottom-right-radius: var(--radius-lg);/* 0.5rem */

rounded-br-xl

border-bottom-right-radius: var(--radius-xl);/* 0.75rem */

rounded-br-2xl

border-bottom-right-radius: var(--radius-2xl);/* 1rem */

rounded-br-3xl

border-bottom-right-radius: var(--radius-3xl);/* 1.5rem */

rounded-br-4xl

border-bottom-right-radius: var(--radius-4xl);/* 2rem */

rounded-br-none

border-bottom-right-radius: 0;

rounded-br-full

border-bottom-right-radius: calc(infinity * 1px);

rounded-br

border-bottom-right-radius: var(--radius-sm);/* 0.25rem */

rounded-bl-xs

border-bottom-left-radius: var(--radius-xs);/* 0.125rem */

rounded-bl-sm

border-bottom-left-radius: var(--radius-sm);/* 0.25rem */

rounded-bl-md

border-bottom-left-radius: var(--radius-md);/* 0.375rem */

rounded-bl-lg

border-bottom-left-radius: var(--radius-lg);/* 0.5rem */

rounded-bl-xl

border-bottom-left-radius: var(--radius-xl);/* 0.75rem */

rounded-bl-2xl

border-bottom-left-radius: var(--radius-2xl);/* 1rem */

rounded-bl-3xl

border-bottom-left-radius: var(--radius-3xl);/* 1.5rem */

rounded-bl-4xl

border-bottom-left-radius: var(--radius-4xl);/* 2rem */

rounded-bl-none

border-bottom-left-radius: 0;

rounded-bl-full

border-bottom-left-radius: calc(infinity * 1px);

rounded-bl

border-bottom-left-radius: var(--radius-sm);/* 0.25rem */

rounded-<number>

border-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-4

border-radius: calc(var(--spacing) * 4);

rounded-<fraction>

border-radius: <percentage>;

rounded-1/2

border-radius: 50%;

rounded-[<value>]

border-radius: <value>;

rounded-[1rem]

border-radius: 1rem;

rounded-(<custom-property>)

border-radius: var(<custom-property>);

rounded-(--my-length)

border-radius: var(--my-length);

rounded-(length:<custom-property>)

border-radius: var(<custom-property>);

rounded-(length:--my-length)

border-radius: var(--my-length);

rounded-s-<number>

border-start-start-radius: calc(var(--spacing) * <number>);/* 0.25rem */
border-end-start-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-s-4

border-start-start-radius: calc(var(--spacing) * 4);
border-end-start-radius: calc(var(--spacing) * 4);

rounded-s-<fraction>

border-start-start-radius: <percentage>;
border-end-start-radius: <percentage>;

rounded-s-1/2

border-start-start-radius: 50%;
border-end-start-radius: 50%;

rounded-s-[<value>]

border-start-start-radius: <value>;
border-end-start-radius: <value>;

rounded-s-[1rem]

border-start-start-radius: 1rem;
border-end-start-radius: 1rem;

rounded-s-(<custom-property>)

border-start-start-radius: var(<custom-property>);
border-end-start-radius: var(<custom-property>);

rounded-s-(--my-length)

border-start-start-radius: var(--my-length);
border-end-start-radius: var(--my-length);

rounded-s-(length:<custom-property>)

border-start-start-radius: var(<custom-property>);
border-end-start-radius: var(<custom-property>);

rounded-s-(length:--my-length)

border-start-start-radius: var(--my-length);
border-end-start-radius: var(--my-length);

rounded-e-<number>

border-start-end-radius: calc(var(--spacing) * <number>);/* 0.25rem */
border-end-end-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-e-4

border-start-end-radius: calc(var(--spacing) * 4);
border-end-end-radius: calc(var(--spacing) * 4);

rounded-e-<fraction>

border-start-end-radius: <percentage>;
border-end-end-radius: <percentage>;

rounded-e-1/2

border-start-end-radius: 50%;
border-end-end-radius: 50%;

rounded-e-[<value>]

border-start-end-radius: <value>;
border-end-end-radius: <value>;

rounded-e-[1rem]

border-start-end-radius: 1rem;
border-end-end-radius: 1rem;

rounded-e-(<custom-property>)

border-start-end-radius: var(<custom-property>);
border-end-end-radius: var(<custom-property>);

rounded-e-(--my-length)

border-start-end-radius: var(--my-length);
border-end-end-radius: var(--my-length);

rounded-e-(length:<custom-property>)

border-start-end-radius: var(<custom-property>);
border-end-end-radius: var(<custom-property>);

rounded-e-(length:--my-length)

border-start-end-radius: var(--my-length);
border-end-end-radius: var(--my-length);

rounded-t-<number>

border-top-left-radius: calc(var(--spacing) * <number>);/* 0.25rem */
border-top-right-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-t-4

border-top-left-radius: calc(var(--spacing) * 4);
border-top-right-radius: calc(var(--spacing) * 4);

rounded-t-<fraction>

border-top-left-radius: <percentage>;
border-top-right-radius: <percentage>;

rounded-t-1/2

border-top-left-radius: 50%;
border-top-right-radius: 50%;

rounded-t-[<value>]

border-top-left-radius: <value>;
border-top-right-radius: <value>;

rounded-t-[1rem]

border-top-left-radius: 1rem;
border-top-right-radius: 1rem;

rounded-t-(<custom-property>)

border-top-left-radius: var(<custom-property>);
border-top-right-radius: var(<custom-property>);

rounded-t-(--my-length)

border-top-left-radius: var(--my-length);
border-top-right-radius: var(--my-length);

rounded-t-(length:<custom-property>)

border-top-left-radius: var(<custom-property>);
border-top-right-radius: var(<custom-property>);

rounded-t-(length:--my-length)

border-top-left-radius: var(--my-length);
border-top-right-radius: var(--my-length);

rounded-r-<number>

border-top-right-radius: calc(var(--spacing) * <number>);/* 0.25rem */
border-bottom-right-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-r-4

border-top-right-radius: calc(var(--spacing) * 4);
border-bottom-right-radius: calc(var(--spacing) * 4);

rounded-r-<fraction>

border-top-right-radius: <percentage>;
border-bottom-right-radius: <percentage>;

rounded-r-1/2

border-top-right-radius: 50%;
border-bottom-right-radius: 50%;

rounded-r-[<value>]

border-top-right-radius: <value>;
border-bottom-right-radius: <value>;

rounded-r-[1rem]

border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;

rounded-r-(<custom-property>)

border-top-right-radius: var(<custom-property>);
border-bottom-right-radius: var(<custom-property>);

rounded-r-(--my-length)

border-top-right-radius: var(--my-length);
border-bottom-right-radius: var(--my-length);

rounded-r-(length:<custom-property>)

border-top-right-radius: var(<custom-property>);
border-bottom-right-radius: var(<custom-property>);

rounded-r-(length:--my-length)

border-top-right-radius: var(--my-length);
border-bottom-right-radius: var(--my-length);

rounded-b-<number>

border-bottom-right-radius: calc(var(--spacing) * <number>);/* 0.25rem */
border-bottom-left-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-b-4

border-bottom-right-radius: calc(var(--spacing) * 4);
border-bottom-left-radius: calc(var(--spacing) * 4);

rounded-b-<fraction>

border-bottom-right-radius: <percentage>;
border-bottom-left-radius: <percentage>;

rounded-b-1/2

border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;

rounded-b-[<value>]

border-bottom-right-radius: <value>;
border-bottom-left-radius: <value>;

rounded-b-[1rem]

border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;

rounded-b-(<custom-property>)

border-bottom-right-radius: var(<custom-property>);
border-bottom-left-radius: var(<custom-property>);

rounded-b-(--my-length)

border-bottom-right-radius: var(--my-length);
border-bottom-left-radius: var(--my-length);

rounded-b-(length:<custom-property>)

border-bottom-right-radius: var(<custom-property>);
border-bottom-left-radius: var(<custom-property>);

rounded-b-(length:--my-length)

border-bottom-right-radius: var(--my-length);
border-bottom-left-radius: var(--my-length);

rounded-l-<number>

border-top-left-radius: calc(var(--spacing) * <number>);/* 0.25rem */
border-bottom-left-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-l-4

border-top-left-radius: calc(var(--spacing) * 4);
border-bottom-left-radius: calc(var(--spacing) * 4);

rounded-l-<fraction>

border-top-left-radius: <percentage>;
border-bottom-left-radius: <percentage>;

rounded-l-1/2

border-top-left-radius: 50%;
border-bottom-left-radius: 50%;

rounded-l-[<value>]

border-top-left-radius: <value>;
border-bottom-left-radius: <value>;

rounded-l-[1rem]

border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;

rounded-l-(<custom-property>)

border-top-left-radius: var(<custom-property>);
border-bottom-left-radius: var(<custom-property>);

rounded-l-(--my-length)

border-top-left-radius: var(--my-length);
border-bottom-left-radius: var(--my-length);

rounded-l-(length:<custom-property>)

border-top-left-radius: var(<custom-property>);
border-bottom-left-radius: var(<custom-property>);

rounded-l-(length:--my-length)

border-top-left-radius: var(--my-length);
border-bottom-left-radius: var(--my-length);

rounded-ss-<number>

border-start-start-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-ss-4

border-start-start-radius: calc(var(--spacing) * 4);

rounded-ss-<fraction>

border-start-start-radius: <percentage>;

rounded-ss-1/2

border-start-start-radius: 50%;

rounded-ss-[<value>]

border-start-start-radius: <value>;

rounded-ss-[1rem]

border-start-start-radius: 1rem;

rounded-ss-(<custom-property>)

border-start-start-radius: var(<custom-property>);

rounded-ss-(--my-length)

border-start-start-radius: var(--my-length);

rounded-ss-(length:<custom-property>)

border-start-start-radius: var(<custom-property>);

rounded-ss-(length:--my-length)

border-start-start-radius: var(--my-length);

rounded-se-<number>

border-start-end-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-se-4

border-start-end-radius: calc(var(--spacing) * 4);

rounded-se-<fraction>

border-start-end-radius: <percentage>;

rounded-se-1/2

border-start-end-radius: 50%;

rounded-se-[<value>]

border-start-end-radius: <value>;

rounded-se-[1rem]

border-start-end-radius: 1rem;

rounded-se-(<custom-property>)

border-start-end-radius: var(<custom-property>);

rounded-se-(--my-length)

border-start-end-radius: var(--my-length);

rounded-se-(length:<custom-property>)

border-start-end-radius: var(<custom-property>);

rounded-se-(length:--my-length)

border-start-end-radius: var(--my-length);

rounded-ee-<number>

border-end-end-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-ee-4

border-end-end-radius: calc(var(--spacing) * 4);

rounded-ee-<fraction>

border-end-end-radius: <percentage>;

rounded-ee-1/2

border-end-end-radius: 50%;

rounded-ee-[<value>]

border-end-end-radius: <value>;

rounded-ee-[1rem]

border-end-end-radius: 1rem;

rounded-ee-(<custom-property>)

border-end-end-radius: var(<custom-property>);

rounded-ee-(--my-length)

border-end-end-radius: var(--my-length);

rounded-ee-(length:<custom-property>)

border-end-end-radius: var(<custom-property>);

rounded-ee-(length:--my-length)

border-end-end-radius: var(--my-length);

rounded-es-<number>

border-end-start-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-es-4

border-end-start-radius: calc(var(--spacing) * 4);

rounded-es-<fraction>

border-end-start-radius: <percentage>;

rounded-es-1/2

border-end-start-radius: 50%;

rounded-es-[<value>]

border-end-start-radius: <value>;

rounded-es-[1rem]

border-end-start-radius: 1rem;

rounded-es-(<custom-property>)

border-end-start-radius: var(<custom-property>);

rounded-es-(--my-length)

border-end-start-radius: var(--my-length);

rounded-es-(length:<custom-property>)

border-end-start-radius: var(<custom-property>);

rounded-es-(length:--my-length)

border-end-start-radius: var(--my-length);

rounded-tl-<number>

border-top-left-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-tl-4

border-top-left-radius: calc(var(--spacing) * 4);

rounded-tl-<fraction>

border-top-left-radius: <percentage>;

rounded-tl-1/2

border-top-left-radius: 50%;

rounded-tl-[<value>]

border-top-left-radius: <value>;

rounded-tl-[1rem]

border-top-left-radius: 1rem;

rounded-tl-(<custom-property>)

border-top-left-radius: var(<custom-property>);

rounded-tl-(--my-length)

border-top-left-radius: var(--my-length);

rounded-tl-(length:<custom-property>)

border-top-left-radius: var(<custom-property>);

rounded-tl-(length:--my-length)

border-top-left-radius: var(--my-length);

rounded-tr-<number>

border-top-right-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-tr-4

border-top-right-radius: calc(var(--spacing) * 4);

rounded-tr-<fraction>

border-top-right-radius: <percentage>;

rounded-tr-1/2

border-top-right-radius: 50%;

rounded-tr-[<value>]

border-top-right-radius: <value>;

rounded-tr-[1rem]

border-top-right-radius: 1rem;

rounded-tr-(<custom-property>)

border-top-right-radius: var(<custom-property>);

rounded-tr-(--my-length)

border-top-right-radius: var(--my-length);

rounded-tr-(length:<custom-property>)

border-top-right-radius: var(<custom-property>);

rounded-tr-(length:--my-length)

border-top-right-radius: var(--my-length);

rounded-br-<number>

border-bottom-right-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-br-4

border-bottom-right-radius: calc(var(--spacing) * 4);

rounded-br-<fraction>

border-bottom-right-radius: <percentage>;

rounded-br-1/2

border-bottom-right-radius: 50%;

rounded-br-[<value>]

border-bottom-right-radius: <value>;

rounded-br-[1rem]

border-bottom-right-radius: 1rem;

rounded-br-(<custom-property>)

border-bottom-right-radius: var(<custom-property>);

rounded-br-(--my-length)

border-bottom-right-radius: var(--my-length);

rounded-br-(length:<custom-property>)

border-bottom-right-radius: var(<custom-property>);

rounded-br-(length:--my-length)

border-bottom-right-radius: var(--my-length);

rounded-bl-<number>

border-bottom-left-radius: calc(var(--spacing) * <number>);/* 0.25rem */

rounded-bl-4

border-bottom-left-radius: calc(var(--spacing) * 4);

rounded-bl-<fraction>

border-bottom-left-radius: <percentage>;

rounded-bl-1/2

border-bottom-left-radius: 50%;

rounded-bl-[<value>]

border-bottom-left-radius: <value>;

rounded-bl-[1rem]

border-bottom-left-radius: 1rem;

rounded-bl-(<custom-property>)

border-bottom-left-radius: var(<custom-property>);

rounded-bl-(--my-length)

border-bottom-left-radius: var(--my-length);

rounded-bl-(length:<custom-property>)

border-bottom-left-radius: var(<custom-property>);

rounded-bl-(length:--my-length)

border-bottom-left-radius: var(--my-length);

border-color

border-style

Borders

border-radius

Quick reference

Sfumato

Community