Home
Docs
Blog
Borders

border-width

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;

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-<fraction>
 
& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: <percentage>;
}
 
divide-x-[<value>]
 
& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: <value>;
}
 
divide-x-(<custom-property>)
 
& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: var(<custom-property>);
}
 
divide-x-(length:<custom-property>)
 
& > :not(:last-child) {
    border-inline-start-width: 0px;
    border-inline-end-width: var(<custom-property>);
}
On This Page
Quick Reference
outline-color

© 2025, Fynydd LLC / King of Prussia, Pennsylvania; United States / +1 855-439-6933

By using this website you accept our privacy policy. Choose the browser data you consent to allow:

Only Required
Accept and Close