Borders

border-width

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 width.

Quick reference

Border Width

Class Styles

border

border-style: var(--sf-border-style);/* solid */
border-width: 1px;

border-x

border-inline-style: var(--sf-border-style);/* solid */
border-inline-width: 1px;

border-y

border-block-style: var(--sf-border-style);/* solid */
border-block-width: 1px;

border-s

border-inline-start-style: var(--sf-border-style);/* solid */
border-inline-start-width: 1px;

border-e

border-inline-end-style: var(--sf-border-style);/* solid */
border-inline-end-width: 1px;

border-t

border-top-style: var(--sf-border-style);/* solid */
border-top-width: 1px;

border-r

border-right-style: var(--sf-border-style);/* solid */
border-right-width: 1px;

border-b

border-bottom-style: var(--sf-border-style);/* solid */
border-bottom-width: 1px;

border-l

border-left-style: var(--sf-border-style);/* solid */
border-left-width: 1px;

border-<number>

border-style: var(--sf-border-style);/* solid */
border-width: <number>px;

border-4

border-style: var(--sf-border-style);
border-width: 4px;

border-<fraction>

border-style: var(--sf-border-style);/* solid */
border-width: <percentage>;

border-1/2

border-style: var(--sf-border-style);
border-width: 50%;

border-[<value>]

border-style: var(--sf-border-style);/* solid */
border-width: <value>;

border-[1rem]

border-style: var(--sf-border-style);
border-width: 1rem;

border-(<custom-property>)

border-style: var(--sf-border-style);/* solid */
border-width: var(<custom-property>);

border-(--my-length)

border-style: var(--sf-border-style);
border-width: var(--my-length);

border-(length:<custom-property>)

border-style: var(--sf-border-style);/* solid */
border-width: var(<custom-property>);

border-(length:--my-length)

border-style: var(--sf-border-style);
border-width: var(--my-length);

border-x-<number>

border-inline-style: var(--sf-border-style);/* solid */
border-inline-width: <number>px;

border-x-4

border-inline-style: var(--sf-border-style);
border-inline-width: 4px;

border-x-<fraction>

border-inline-style: var(--sf-border-style);/* solid */
border-inline-width: <percentage>;

border-x-1/2

border-inline-style: var(--sf-border-style);
border-inline-width: 50%;

border-x-[<value>]

border-inline-style: var(--sf-border-style);/* solid */
border-inline-width: <value>;

border-x-[1rem]

border-inline-style: var(--sf-border-style);
border-inline-width: 1rem;

border-x-(<custom-property>)

border-inline-style: var(--sf-border-style);/* solid */
border-inline-width: var(<custom-property>);

border-x-(--my-length)

border-inline-style: var(--sf-border-style);
border-inline-width: var(--my-length);

border-x-(length:<custom-property>)

border-inline-style: var(--sf-border-style);/* solid */
border-inline-width: var(<custom-property>);

border-x-(length:--my-length)

border-inline-style: var(--sf-border-style);
border-inline-width: var(--my-length);

border-y-<number>

border-block-style: var(--sf-border-style);/* solid */
border-block-width: <number>px;

border-y-4

border-block-style: var(--sf-border-style);
border-block-width: 4px;

border-y-<fraction>

border-block-style: var(--sf-border-style);/* solid */
border-block-width: <percentage>;

border-y-1/2

border-block-style: var(--sf-border-style);
border-block-width: 50%;

border-y-[<value>]

border-block-style: var(--sf-border-style);/* solid */
border-block-width: <value>;

border-y-[1rem]

border-block-style: var(--sf-border-style);
border-block-width: 1rem;

border-y-(<custom-property>)

border-block-style: var(--sf-border-style);/* solid */
border-block-width: var(<custom-property>);

border-y-(--my-length)

border-block-style: var(--sf-border-style);
border-block-width: var(--my-length);

border-y-(length:<custom-property>)

border-block-style: var(--sf-border-style);/* solid */
border-block-width: var(<custom-property>);

border-y-(length:--my-length)

border-block-style: var(--sf-border-style);
border-block-width: var(--my-length);

border-s-<number>

border-inline-start-style: var(--sf-border-style);/* solid */
border-inline-start-width: <number>px;

border-s-4

border-inline-start-style: var(--sf-border-style);
border-inline-start-width: 4px;

border-s-<fraction>

border-inline-start-style: var(--sf-border-style);/* solid */
border-inline-start-width: <percentage>;

border-s-1/2

border-inline-start-style: var(--sf-border-style);
border-inline-start-width: 50%;

border-s-[<value>]

border-inline-start-style: var(--sf-border-style);/* solid */
border-inline-start-width: <value>;

border-s-[1rem]

border-inline-start-style: var(--sf-border-style);
border-inline-start-width: 1rem;

border-s-(<custom-property>)

border-inline-start-style: var(--sf-border-style);/* solid */
border-inline-start-width: var(<custom-property>);

border-s-(--my-length)

border-inline-start-style: var(--sf-border-style);
border-inline-start-width: var(--my-length);

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

border-inline-start-style: var(--sf-border-style);/* solid */
border-inline-start-width: var(<custom-property>);

border-s-(length:--my-length)

border-inline-start-style: var(--sf-border-style);
border-inline-start-width: var(--my-length);

border-e-<number>

border-inline-end-style: var(--sf-border-style);/* solid */
border-inline-end-width: <number>px;

border-e-4

border-inline-end-style: var(--sf-border-style);
border-inline-end-width: 4px;

border-e-<fraction>

border-inline-end-style: var(--sf-border-style);/* solid */
border-inline-end-width: <percentage>;

border-e-1/2

border-inline-end-style: var(--sf-border-style);
border-inline-end-width: 50%;

border-e-[<value>]

border-inline-end-style: var(--sf-border-style);/* solid */
border-inline-end-width: <value>;

border-e-[1rem]

border-inline-end-style: var(--sf-border-style);
border-inline-end-width: 1rem;

border-e-(<custom-property>)

border-inline-end-style: var(--sf-border-style);/* solid */
border-inline-end-width: var(<custom-property>);

border-e-(--my-length)

border-inline-end-style: var(--sf-border-style);
border-inline-end-width: var(--my-length);

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

border-inline-end-style: var(--sf-border-style);/* solid */
border-inline-end-width: var(<custom-property>);

border-e-(length:--my-length)

border-inline-end-style: var(--sf-border-style);
border-inline-end-width: var(--my-length);

border-t-<number>

border-top-style: var(--sf-border-style);/* solid */
border-top-width: <number>px;

border-t-4

border-top-style: var(--sf-border-style);
border-top-width: 4px;

border-t-<fraction>

border-top-style: var(--sf-border-style);/* solid */
border-top-width: <percentage>;

border-t-1/2

border-top-style: var(--sf-border-style);
border-top-width: 50%;

border-t-[<value>]

border-top-style: var(--sf-border-style);/* solid */
border-top-width: <value>;

border-t-[1rem]

border-top-style: var(--sf-border-style);
border-top-width: 1rem;

border-t-(<custom-property>)

border-top-style: var(--sf-border-style);/* solid */
border-top-width: var(<custom-property>);

border-t-(--my-length)

border-top-style: var(--sf-border-style);
border-top-width: var(--my-length);

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

border-top-style: var(--sf-border-style);/* solid */
border-top-width: var(<custom-property>);

border-t-(length:--my-length)

border-top-style: var(--sf-border-style);
border-top-width: var(--my-length);

border-r-<number>

border-right-style: var(--sf-border-style);/* solid */
border-right-width: <number>px;

border-r-4

border-right-style: var(--sf-border-style);
border-right-width: 4px;

border-r-<fraction>

border-right-style: var(--sf-border-style);/* solid */
border-right-width: <percentage>;

border-r-1/2

border-right-style: var(--sf-border-style);
border-right-width: 50%;

border-r-[<value>]

border-right-style: var(--sf-border-style);/* solid */
border-right-width: <value>;

border-r-[1rem]

border-right-style: var(--sf-border-style);
border-right-width: 1rem;

border-r-(<custom-property>)

border-right-style: var(--sf-border-style);/* solid */
border-right-width: var(<custom-property>);

border-r-(--my-length)

border-right-style: var(--sf-border-style);
border-right-width: var(--my-length);

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

border-right-style: var(--sf-border-style);/* solid */
border-right-width: var(<custom-property>);

border-r-(length:--my-length)

border-right-style: var(--sf-border-style);
border-right-width: var(--my-length);

border-b-<number>

border-bottom-style: var(--sf-border-style);/* solid */
border-bottom-width: <number>px;

border-b-4

border-bottom-style: var(--sf-border-style);
border-bottom-width: 4px;

border-b-<fraction>

border-bottom-style: var(--sf-border-style);/* solid */
border-bottom-width: <percentage>;

border-b-1/2

border-bottom-style: var(--sf-border-style);
border-bottom-width: 50%;

border-b-[<value>]

border-bottom-style: var(--sf-border-style);/* solid */
border-bottom-width: <value>;

border-b-[1rem]

border-bottom-style: var(--sf-border-style);
border-bottom-width: 1rem;

border-b-(<custom-property>)

border-bottom-style: var(--sf-border-style);/* solid */
border-bottom-width: var(<custom-property>);

border-b-(--my-length)

border-bottom-style: var(--sf-border-style);
border-bottom-width: var(--my-length);

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

border-bottom-style: var(--sf-border-style);/* solid */
border-bottom-width: var(<custom-property>);

border-b-(length:--my-length)

border-bottom-style: var(--sf-border-style);
border-bottom-width: var(--my-length);

border-l-<number>

border-left-style: var(--sf-border-style);/* solid */
border-left-width: <number>px;

border-l-4

border-left-style: var(--sf-border-style);
border-left-width: 4px;

border-l-<fraction>

border-left-style: var(--sf-border-style);/* solid */
border-left-width: <percentage>;

border-l-1/2

border-left-style: var(--sf-border-style);
border-left-width: 50%;

border-l-[<value>]

border-left-style: var(--sf-border-style);/* solid */
border-left-width: <value>;

border-l-[1rem]

border-left-style: var(--sf-border-style);
border-left-width: 1rem;

border-l-(<custom-property>)

border-left-style: var(--sf-border-style);/* solid */
border-left-width: var(<custom-property>);

border-l-(--my-length)

border-left-style: var(--sf-border-style);
border-left-width: var(--my-length);

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

border-left-style: var(--sf-border-style);/* solid */
border-left-width: var(<custom-property>);

border-l-(length:--my-length)

border-left-style: var(--sf-border-style);
border-left-width: var(--my-length);

Divide Width

Class Styles

divide-x

& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: 1px;
}

divide-y

& > :not(:last-child) {
    border-top-width: 0px;
    border-bottom-width: 1px;
}

divide-x-reverse

--sf-divide-x-reverse: 1;

divide-y-reverse

--sf-divide-y-reverse: 1;

divide-x-<number>

& > :not(:last-child) {
    border-inline-start-width: calc(<number>px * var(--sf-divide-x-reverse));/* 0 */
    border-inline-end-width: calc(<number>px * calc(1 - var(--sf-divide-x-reverse)))/* 0 */
}

divide-x-4

& > :not(:last-child) {
    border-inline-start-width: calc(4px * var(--sf-divide-x-reverse));
    border-inline-end-width: calc(4px * calc(1 - var(--sf-divide-x-reverse)))
}

divide-x-<fraction>

& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: <percentage>;
}

divide-x-1/2

& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: 50%;
}

divide-x-[<value>]

& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: <value>;
}

divide-x-[1rem]

& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: 1rem;
}

divide-x-(<custom-property>)

& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: var(<custom-property>);
}

divide-x-(--my-length)

& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: var(--my-length);
}

divide-x-(length:<custom-property>)

& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: var(<custom-property>);
}

divide-x-(length:--my-length)

& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: var(--my-length);
}

divide-y-<number>

& > :not(:last-child) {
    border-top-width: calc(<number>px * var(--sf-divide-y-reverse));/* 0 */
    border-bottom-width: calc(<number>px * calc(1 - var(--sf-divide-y-reverse)))/* 0 */
}

divide-y-4

& > :not(:last-child) {
    border-top-width: calc(4px * var(--sf-divide-y-reverse));
    border-bottom-width: calc(4px * calc(1 - var(--sf-divide-y-reverse)))
}

divide-y-<fraction>

& > :not(:last-child) {
    border-top-width: 0px;
    border-bottom-width: <percentage>;
}

divide-y-1/2

& > :not(:last-child) {
    border-top-width: 0px;
    border-bottom-width: 50%;
}

divide-y-[<value>]

& > :not(:last-child) {
    border-top-width: 0px;
    border-bottom-width: <value>;
}

divide-y-[1rem]

& > :not(:last-child) {
    border-top-width: 0px;
    border-bottom-width: 1rem;
}

divide-y-(<custom-property>)

& > :not(:last-child) {
    border-top-width: 0px;
    border-bottom-width: var(<custom-property>);
}

divide-y-(--my-length)

& > :not(:last-child) {
    border-top-width: 0px;
    border-bottom-width: var(--my-length);
}

divide-y-(length:<custom-property>)

& > :not(:last-child) {
    border-top-width: 0px;
    border-bottom-width: var(<custom-property>);
}

divide-y-(length:--my-length)

& > :not(:last-child) {
    border-top-width: 0px;
    border-bottom-width: var(--my-length);
}

border-style

outline-color

Borders

border-width

Quick reference

Border Width

Divide Width

Sfumato

Community