Choose a layout

border-width

Report an Issue

	Class	Description
border-w Sets border-width on all sides via --border-w. Raw value, include unit (e.g. 2px). CSS Rules `.border-w { border-width: var(--border-w); }` Usage The `.border-w` class is flagged as a value-driven selector. The variable `--border-w` is required. `<element class="border-w" style="--border-w: /* value /;" />` Responsive Prefix `.border-w` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:border-w" style="--md-border-w: / value /;" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="border-w:hover" style="--border-w-hover: / value /;" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="border-w:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before border-w::before" style="--border-w-before: / value /;" /> <element class="content-after border-w::after" style="--border-w-after: / value */;" />` Shorthand Value-driven classes support a shorthand syntax like `bg=pink` or `p=4`. The runtime processes this for you. Unlike `:hover` that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. `<!-- Input --> <element class="border-w=value" /> <!-- Output --> <element class="border-w" style="--border-w: value;" />` CLS Alert This feature may cause CLS (Cumulative Layout Shift). Make sure to include a `z-not-ready` class in your `<head>` tag.	`.border-w`	Sets border-width on all sides via --border-w. Raw value, include unit (e.g. 2px).
border-t-w Sets border-top-width via --border-t-w. Raw value. CSS Rules `.border-t-w { border-top-width: var(--border-t-w); }` Usage The `.border-t-w` class is flagged as a value-driven selector. The variable `--border-t-w` is required. `<element class="border-t-w" style="--border-t-w: /* value /;" />` Responsive Prefix `.border-t-w` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:border-t-w" style="--md-border-t-w: / value /;" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="border-t-w:hover" style="--border-t-w-hover: / value /;" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="border-t-w:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before border-t-w::before" style="--border-t-w-before: / value /;" /> <element class="content-after border-t-w::after" style="--border-t-w-after: / value */;" />` Shorthand Value-driven classes support a shorthand syntax like `bg=pink` or `p=4`. The runtime processes this for you. Unlike `:hover` that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. `<!-- Input --> <element class="border-t-w=value" /> <!-- Output --> <element class="border-t-w" style="--border-t-w: value;" />` CLS Alert This feature may cause CLS (Cumulative Layout Shift). Make sure to include a `z-not-ready` class in your `<head>` tag.	`.border-t-w`	Sets border-top-width via --border-t-w. Raw value.
border-r-w Sets the right border thickness. Accepts a custom width value. CSS Rules `.border-r-w { border-right-width: var(--border-r-w); }` Usage The `.border-r-w` class is flagged as a value-driven selector. The variable `--border-r-w` is required. `<element class="border-r-w" style="--border-r-w: /* value /;" />` Responsive Prefix `.border-r-w` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:border-r-w" style="--md-border-r-w: / value /;" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="border-r-w:hover" style="--border-r-w-hover: / value /;" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="border-r-w:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before border-r-w::before" style="--border-r-w-before: / value /;" /> <element class="content-after border-r-w::after" style="--border-r-w-after: / value */;" />` Shorthand Value-driven classes support a shorthand syntax like `bg=pink` or `p=4`. The runtime processes this for you. Unlike `:hover` that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. `<!-- Input --> <element class="border-r-w=value" /> <!-- Output --> <element class="border-r-w" style="--border-r-w: value;" />` CLS Alert This feature may cause CLS (Cumulative Layout Shift). Make sure to include a `z-not-ready` class in your `<head>` tag.	`.border-r-w`	Sets the right border thickness. Accepts a custom width value.
border-b-w Sets border-bottom-width via --border-b-w. Raw value. CSS Rules `.border-b-w { border-bottom-width: var(--border-b-w); }` Usage The `.border-b-w` class is flagged as a value-driven selector. The variable `--border-b-w` is required. `<element class="border-b-w" style="--border-b-w: /* value /;" />` Responsive Prefix `.border-b-w` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:border-b-w" style="--md-border-b-w: / value /;" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="border-b-w:hover" style="--border-b-w-hover: / value /;" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="border-b-w:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before border-b-w::before" style="--border-b-w-before: / value /;" /> <element class="content-after border-b-w::after" style="--border-b-w-after: / value */;" />` Shorthand Value-driven classes support a shorthand syntax like `bg=pink` or `p=4`. The runtime processes this for you. Unlike `:hover` that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. `<!-- Input --> <element class="border-b-w=value" /> <!-- Output --> <element class="border-b-w" style="--border-b-w: value;" />` CLS Alert This feature may cause CLS (Cumulative Layout Shift). Make sure to include a `z-not-ready` class in your `<head>` tag.	`.border-b-w`	Sets border-bottom-width via --border-b-w. Raw value.
border-l-w Sets the left border thickness. Accepts a custom width value. CSS Rules `.border-l-w { border-left-width: var(--border-l-w); }` Usage The `.border-l-w` class is flagged as a value-driven selector. The variable `--border-l-w` is required. `<element class="border-l-w" style="--border-l-w: /* value /;" />` Responsive Prefix `.border-l-w` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:border-l-w" style="--md-border-l-w: / value /;" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="border-l-w:hover" style="--border-l-w-hover: / value /;" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="border-l-w:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before border-l-w::before" style="--border-l-w-before: / value /;" /> <element class="content-after border-l-w::after" style="--border-l-w-after: / value */;" />` Shorthand Value-driven classes support a shorthand syntax like `bg=pink` or `p=4`. The runtime processes this for you. Unlike `:hover` that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. `<!-- Input --> <element class="border-l-w=value" /> <!-- Output --> <element class="border-l-w" style="--border-l-w: value;" />` CLS Alert This feature may cause CLS (Cumulative Layout Shift). Make sure to include a `z-not-ready` class in your `<head>` tag.	`.border-l-w`	Sets the left border thickness. Accepts a custom width value.
border-s-w Sets the inline-start border thickness. Logical width for start-edge borders. CSS Rules `.border-s-w { border-inline-start-width: var(--border-s-w); }` Usage The `.border-s-w` class is flagged as a value-driven selector. The variable `--border-s-w` is required. `<element class="border-s-w" style="--border-s-w: /* value /;" />` Responsive Prefix `.border-s-w` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:border-s-w" style="--md-border-s-w: / value /;" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="border-s-w:hover" style="--border-s-w-hover: / value /;" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="border-s-w:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before border-s-w::before" style="--border-s-w-before: / value /;" /> <element class="content-after border-s-w::after" style="--border-s-w-after: / value */;" />` Shorthand Value-driven classes support a shorthand syntax like `bg=pink` or `p=4`. The runtime processes this for you. Unlike `:hover` that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. `<!-- Input --> <element class="border-s-w=value" /> <!-- Output --> <element class="border-s-w" style="--border-s-w: value;" />` CLS Alert This feature may cause CLS (Cumulative Layout Shift). Make sure to include a `z-not-ready` class in your `<head>` tag.	`.border-s-w`	Sets the inline-start border thickness. Logical width for start-edge borders.
border-e-w Sets the inline-end border thickness. Logical width for end-edge borders. CSS Rules `.border-e-w { border-inline-end-width: var(--border-e-w); }` Usage The `.border-e-w` class is flagged as a value-driven selector. The variable `--border-e-w` is required. `<element class="border-e-w" style="--border-e-w: /* value /;" />` Responsive Prefix `.border-e-w` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:border-e-w" style="--md-border-e-w: / value /;" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="border-e-w:hover" style="--border-e-w-hover: / value /;" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="border-e-w:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before border-e-w::before" style="--border-e-w-before: / value /;" /> <element class="content-after border-e-w::after" style="--border-e-w-after: / value */;" />` Shorthand Value-driven classes support a shorthand syntax like `bg=pink` or `p=4`. The runtime processes this for you. Unlike `:hover` that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. `<!-- Input --> <element class="border-e-w=value" /> <!-- Output --> <element class="border-e-w" style="--border-e-w: value;" />` CLS Alert This feature may cause CLS (Cumulative Layout Shift). Make sure to include a `z-not-ready` class in your `<head>` tag.	`.border-e-w`	Sets the inline-end border thickness. Logical width for end-edge borders.
border-x-w Sets border-left-width and border-right-width via --border-x-w. Raw value. CSS Rules `.border-x-w { border-inline-width: var(--border-x-w); }` Usage The `.border-x-w` class is flagged as a value-driven selector. The variable `--border-x-w` is required. `<element class="border-x-w" style="--border-x-w: /* value /;" />` Responsive Prefix `.border-x-w` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:border-x-w" style="--md-border-x-w: / value /;" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="border-x-w:hover" style="--border-x-w-hover: / value /;" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="border-x-w:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before border-x-w::before" style="--border-x-w-before: / value /;" /> <element class="content-after border-x-w::after" style="--border-x-w-after: / value */;" />` Shorthand Value-driven classes support a shorthand syntax like `bg=pink` or `p=4`. The runtime processes this for you. Unlike `:hover` that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. `<!-- Input --> <element class="border-x-w=value" /> <!-- Output --> <element class="border-x-w" style="--border-x-w: value;" />` CLS Alert This feature may cause CLS (Cumulative Layout Shift). Make sure to include a `z-not-ready` class in your `<head>` tag.	`.border-x-w`	Sets border-left-width and border-right-width via --border-x-w. Raw value.
border-y-w Sets border-top-width and border-bottom-width via --border-y-w. Raw value. CSS Rules `.border-y-w { border-block-width: var(--border-y-w); }` Usage The `.border-y-w` class is flagged as a value-driven selector. The variable `--border-y-w` is required. `<element class="border-y-w" style="--border-y-w: /* value /;" />` Responsive Prefix `.border-y-w` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:border-y-w" style="--md-border-y-w: / value /;" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="border-y-w:hover" style="--border-y-w-hover: / value /;" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="border-y-w:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before border-y-w::before" style="--border-y-w-before: / value /;" /> <element class="content-after border-y-w::after" style="--border-y-w-after: / value */;" />` Shorthand Value-driven classes support a shorthand syntax like `bg=pink` or `p=4`. The runtime processes this for you. Unlike `:hover` that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. `<!-- Input --> <element class="border-y-w=value" /> <!-- Output --> <element class="border-y-w" style="--border-y-w: value;" />` CLS Alert This feature may cause CLS (Cumulative Layout Shift). Make sure to include a `z-not-ready` class in your `<head>` tag.	`.border-y-w`	Sets border-top-width and border-bottom-width via --border-y-w. Raw value.