0build.dev
Choose a layout

border-color

Report an Issue
Class Description

border

Sets border-color on all sides via --border.

CSS Rules 

.border {
  border-color: var(--border);
}

Usage

The .border class is flagged as a value-driven selector. The variable --border is required. 
<element class="border" style="--border: /* value */;" />

Responsive & Dark Mode

Prefix .border utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element class="md:border" style="--md-border: /* value */;" />

<element class="dark:sm:border" style="--dark-sm-border: /* 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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="border:hover" style="--border-hover: /* value */;" />

<element class="dark:sm:border:hover" style="--dark-sm-border-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: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::before" style="--border-before: /* value */;" />

<element class="content-after border::after" style="--border-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=value" />

<!-- Output -->
<element class="border" style="--border: 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 Sets border-color on all sides via --border.

border-t

Sets border-top-color via --border-t.

CSS Rules 

.border-t {
  border-top-color: var(--border-t);
}

Usage

The .border-t class is flagged as a value-driven selector. The variable --border-t is required. 
<element class="border-t" style="--border-t: /* value */;" />

Responsive & Dark Mode

Prefix .border-t utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element class="md:border-t" style="--md-border-t: /* value */;" />

<element class="dark:sm:border-t" style="--dark-sm-border-t: /* 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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="border-t:hover" style="--border-t-hover: /* value */;" />

<element class="dark:sm:border-t:hover" style="--dark-sm-border-t-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: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::before" style="--border-t-before: /* value */;" />

<element class="content-after border-t::after" style="--border-t-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=value" />

<!-- Output -->
<element class="border-t" style="--border-t: 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 Sets border-top-color via --border-t.

border-r

Sets border-right-color via --border-r.

CSS Rules 

.border-r {
  border-right-color: var(--border-r);
}

Usage

The .border-r class is flagged as a value-driven selector. The variable --border-r is required. 
<element class="border-r" style="--border-r: /* value */;" />

Responsive & Dark Mode

Prefix .border-r utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element class="md:border-r" style="--md-border-r: /* value */;" />

<element class="dark:sm:border-r" style="--dark-sm-border-r: /* 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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="border-r:hover" style="--border-r-hover: /* value */;" />

<element class="dark:sm:border-r:hover" style="--dark-sm-border-r-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: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::before" style="--border-r-before: /* value */;" />

<element class="content-after border-r::after" style="--border-r-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=value" />

<!-- Output -->
<element class="border-r" style="--border-r: 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 Sets border-right-color via --border-r.

border-b

Sets border-bottom-color via --border-b.

CSS Rules 

.border-b {
  border-bottom-color: var(--border-b);
}

Usage

The .border-b class is flagged as a value-driven selector. The variable --border-b is required. 
<element class="border-b" style="--border-b: /* value */;" />

Responsive & Dark Mode

Prefix .border-b utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element class="md:border-b" style="--md-border-b: /* value */;" />

<element class="dark:sm:border-b" style="--dark-sm-border-b: /* 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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="border-b:hover" style="--border-b-hover: /* value */;" />

<element class="dark:sm:border-b:hover" style="--dark-sm-border-b-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: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::before" style="--border-b-before: /* value */;" />

<element class="content-after border-b::after" style="--border-b-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=value" />

<!-- Output -->
<element class="border-b" style="--border-b: 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 Sets border-bottom-color via --border-b.

border-l

Sets border-left-color via --border-l.

CSS Rules 

.border-l {
  border-left-color: var(--border-l);
}

Usage

The .border-l class is flagged as a value-driven selector. The variable --border-l is required. 
<element class="border-l" style="--border-l: /* value */;" />

Responsive & Dark Mode

Prefix .border-l utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element class="md:border-l" style="--md-border-l: /* value */;" />

<element class="dark:sm:border-l" style="--dark-sm-border-l: /* 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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="border-l:hover" style="--border-l-hover: /* value */;" />

<element class="dark:sm:border-l:hover" style="--dark-sm-border-l-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: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::before" style="--border-l-before: /* value */;" />

<element class="content-after border-l::after" style="--border-l-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=value" />

<!-- Output -->
<element class="border-l" style="--border-l: 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 Sets border-left-color via --border-l.

border-s

Colors the inline-start border. Accepts an arbitrary color and supports dark mode.

CSS Rules 

.border-s {
  border-inline-start-color: var(--border-s);
}

Usage

The .border-s class is flagged as a value-driven selector. The variable --border-s is required. 
<element class="border-s" style="--border-s: /* value */;" />

Responsive & Dark Mode

Prefix .border-s utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element class="md:border-s" style="--md-border-s: /* value */;" />

<element class="dark:sm:border-s" style="--dark-sm-border-s: /* 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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="border-s:hover" style="--border-s-hover: /* value */;" />

<element class="dark:sm:border-s:hover" style="--dark-sm-border-s-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: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::before" style="--border-s-before: /* value */;" />

<element class="content-after border-s::after" style="--border-s-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=value" />

<!-- Output -->
<element class="border-s" style="--border-s: 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 Colors the inline-start border. Accepts an arbitrary color and supports dark mode.

border-e

Colors the inline-end border. Accepts an arbitrary color and supports dark mode.

CSS Rules 

.border-e {
  border-inline-end-color: var(--border-e);
}

Usage

The .border-e class is flagged as a value-driven selector. The variable --border-e is required. 
<element class="border-e" style="--border-e: /* value */;" />

Responsive & Dark Mode

Prefix .border-e utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element class="md:border-e" style="--md-border-e: /* value */;" />

<element class="dark:sm:border-e" style="--dark-sm-border-e: /* 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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="border-e:hover" style="--border-e-hover: /* value */;" />

<element class="dark:sm:border-e:hover" style="--dark-sm-border-e-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: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::before" style="--border-e-before: /* value */;" />

<element class="content-after border-e::after" style="--border-e-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=value" />

<!-- Output -->
<element class="border-e" style="--border-e: 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 Colors the inline-end border. Accepts an arbitrary color and supports dark mode.

border-x

Sets border-left-color and border-right-color via --border-x.

CSS Rules 

.border-x {
  border-inline-color: var(--border-x);
}

Usage

The .border-x class is flagged as a value-driven selector. The variable --border-x is required. 
<element class="border-x" style="--border-x: /* value */;" />

Responsive & Dark Mode

Prefix .border-x utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element class="md:border-x" style="--md-border-x: /* value */;" />

<element class="dark:sm:border-x" style="--dark-sm-border-x: /* 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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="border-x:hover" style="--border-x-hover: /* value */;" />

<element class="dark:sm:border-x:hover" style="--dark-sm-border-x-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: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::before" style="--border-x-before: /* value */;" />

<element class="content-after border-x::after" style="--border-x-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=value" />

<!-- Output -->
<element class="border-x" style="--border-x: 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 Sets border-left-color and border-right-color via --border-x.

border-y

Sets border-top-color and border-bottom-color via --border-y.

CSS Rules 

.border-y {
  border-block-color: var(--border-y);
}

Usage

The .border-y class is flagged as a value-driven selector. The variable --border-y is required. 
<element class="border-y" style="--border-y: /* value */;" />

Responsive & Dark Mode

Prefix .border-y utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element class="md:border-y" style="--md-border-y: /* value */;" />

<element class="dark:sm:border-y" style="--dark-sm-border-y: /* 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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="border-y:hover" style="--border-y-hover: /* value */;" />

<element class="dark:sm:border-y:hover" style="--dark-sm-border-y-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: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::before" style="--border-y-before: /* value */;" />

<element class="content-after border-y::after" style="--border-y-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=value" />

<!-- Output -->
<element class="border-y" style="--border-y: 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 Sets border-top-color and border-bottom-color via --border-y.

border/o

Sets border-color + opacity via --border and --border-o.

CSS Rules 

.border\/o {
  border-color: color-mix(in oklab, var(--border) var(--border-o, 100%), transparent);
}

Usage

The .border/o class is flagged as a value-driven selector. The variables --border and --border-o are required. 
<element
  class="border/o"
  style="
    --border: /* value */;
    --border-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .border/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element
  class="md:border/o"
  style="
    --md-border: /* value */;
    --md-border-o: /* value */;
  "
></element>

<element
  class="dark:sm:border/o"
  style="
    --dark-sm-border: /* value */;
    --dark-sm-border-o: /* value */;
  "
></element>

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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="border/o:hover"
  style="
    --border-hover: /* value */;
    --border-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:border/o:hover"
  style="
    --dark-sm-border-hover: /* value */;
    --dark-sm-border-o-hover: /* value */;
  "
></element>

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/o: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/o::before"
  style="
    --border-before: /* value */;
    --border-o-before: /* value */;
  "
></element>

<element
  class="content-after border/o::after"
  style="
    --border-after: /* value */;
    --border-o-after: /* value */;
  "
></element>

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/o=value" />

<!-- Output -->
<element class="border/o" style="--border: 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/o Sets border-color + opacity via --border and --border-o.

border-t/o

Sets border-top color + opacity independently via --border-t and --border-t-o.

CSS Rules 

.border-t\/o {
  border-top-color: color-mix(in oklab, var(--border-t) var(--border-t-o, 100%), transparent);
}

Usage

The .border-t/o class is flagged as a value-driven selector. The variables --border-t and --border-t-o are required. 
<element
  class="border-t/o"
  style="
    --border-t: /* value */;
    --border-t-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .border-t/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element
  class="md:border-t/o"
  style="
    --md-border-t: /* value */;
    --md-border-t-o: /* value */;
  "
></element>

<element
  class="dark:sm:border-t/o"
  style="
    --dark-sm-border-t: /* value */;
    --dark-sm-border-t-o: /* value */;
  "
></element>

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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="border-t/o:hover"
  style="
    --border-t-hover: /* value */;
    --border-t-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:border-t/o:hover"
  style="
    --dark-sm-border-t-hover: /* value */;
    --dark-sm-border-t-o-hover: /* value */;
  "
></element>

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/o: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/o::before"
  style="
    --border-t-before: /* value */;
    --border-t-o-before: /* value */;
  "
></element>

<element
  class="content-after border-t/o::after"
  style="
    --border-t-after: /* value */;
    --border-t-o-after: /* value */;
  "
></element>

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/o=value" />

<!-- Output -->
<element class="border-t/o" style="--border-t: 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/o Sets border-top color + opacity independently via --border-t and --border-t-o.

border-r/o

Sets border-right color + opacity independently via --border-r and --border-r-o.

CSS Rules 

.border-r\/o {
  border-right-color: color-mix(in oklab, var(--border-r) var(--border-r-o, 100%), transparent);
}

Usage

The .border-r/o class is flagged as a value-driven selector. The variables --border-r and --border-r-o are required. 
<element
  class="border-r/o"
  style="
    --border-r: /* value */;
    --border-r-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .border-r/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element
  class="md:border-r/o"
  style="
    --md-border-r: /* value */;
    --md-border-r-o: /* value */;
  "
></element>

<element
  class="dark:sm:border-r/o"
  style="
    --dark-sm-border-r: /* value */;
    --dark-sm-border-r-o: /* value */;
  "
></element>

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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="border-r/o:hover"
  style="
    --border-r-hover: /* value */;
    --border-r-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:border-r/o:hover"
  style="
    --dark-sm-border-r-hover: /* value */;
    --dark-sm-border-r-o-hover: /* value */;
  "
></element>

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/o: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/o::before"
  style="
    --border-r-before: /* value */;
    --border-r-o-before: /* value */;
  "
></element>

<element
  class="content-after border-r/o::after"
  style="
    --border-r-after: /* value */;
    --border-r-o-after: /* value */;
  "
></element>

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/o=value" />

<!-- Output -->
<element class="border-r/o" style="--border-r: 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/o Sets border-right color + opacity independently via --border-r and --border-r-o.

border-b/o

Sets border-bottom color + opacity independently via --border-b and --border-b-o.

CSS Rules 

.border-b\/o {
  border-bottom-color: color-mix(in oklab, var(--border-b) var(--border-b-o, 100%), transparent);
}

Usage

The .border-b/o class is flagged as a value-driven selector. The variables --border-b and --border-b-o are required. 
<element
  class="border-b/o"
  style="
    --border-b: /* value */;
    --border-b-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .border-b/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element
  class="md:border-b/o"
  style="
    --md-border-b: /* value */;
    --md-border-b-o: /* value */;
  "
></element>

<element
  class="dark:sm:border-b/o"
  style="
    --dark-sm-border-b: /* value */;
    --dark-sm-border-b-o: /* value */;
  "
></element>

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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="border-b/o:hover"
  style="
    --border-b-hover: /* value */;
    --border-b-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:border-b/o:hover"
  style="
    --dark-sm-border-b-hover: /* value */;
    --dark-sm-border-b-o-hover: /* value */;
  "
></element>

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/o: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/o::before"
  style="
    --border-b-before: /* value */;
    --border-b-o-before: /* value */;
  "
></element>

<element
  class="content-after border-b/o::after"
  style="
    --border-b-after: /* value */;
    --border-b-o-after: /* value */;
  "
></element>

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/o=value" />

<!-- Output -->
<element class="border-b/o" style="--border-b: 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/o Sets border-bottom color + opacity independently via --border-b and --border-b-o.

border-l/o

Sets border-left color + opacity independently via --border-l and --border-l-o.

CSS Rules 

.border-l\/o {
  border-left-color: color-mix(in oklab, var(--border-l) var(--border-l-o, 100%), transparent);
}

Usage

The .border-l/o class is flagged as a value-driven selector. The variables --border-l and --border-l-o are required. 
<element
  class="border-l/o"
  style="
    --border-l: /* value */;
    --border-l-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .border-l/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element
  class="md:border-l/o"
  style="
    --md-border-l: /* value */;
    --md-border-l-o: /* value */;
  "
></element>

<element
  class="dark:sm:border-l/o"
  style="
    --dark-sm-border-l: /* value */;
    --dark-sm-border-l-o: /* value */;
  "
></element>

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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="border-l/o:hover"
  style="
    --border-l-hover: /* value */;
    --border-l-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:border-l/o:hover"
  style="
    --dark-sm-border-l-hover: /* value */;
    --dark-sm-border-l-o-hover: /* value */;
  "
></element>

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/o: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/o::before"
  style="
    --border-l-before: /* value */;
    --border-l-o-before: /* value */;
  "
></element>

<element
  class="content-after border-l/o::after"
  style="
    --border-l-after: /* value */;
    --border-l-o-after: /* value */;
  "
></element>

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/o=value" />

<!-- Output -->
<element class="border-l/o" style="--border-l: 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/o Sets border-left color + opacity independently via --border-l and --border-l-o.

border-s/o

Sets border-inline-start color + opacity independently via --border-s and --border-s-o.

CSS Rules 

.border-s\/o {
  border-inline-start-color: color-mix(in oklab, var(--border-s) var(--border-s-o, 100%), transparent);
}

Usage

The .border-s/o class is flagged as a value-driven selector. The variables --border-s and --border-s-o are required. 
<element
  class="border-s/o"
  style="
    --border-s: /* value */;
    --border-s-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .border-s/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element
  class="md:border-s/o"
  style="
    --md-border-s: /* value */;
    --md-border-s-o: /* value */;
  "
></element>

<element
  class="dark:sm:border-s/o"
  style="
    --dark-sm-border-s: /* value */;
    --dark-sm-border-s-o: /* value */;
  "
></element>

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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="border-s/o:hover"
  style="
    --border-s-hover: /* value */;
    --border-s-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:border-s/o:hover"
  style="
    --dark-sm-border-s-hover: /* value */;
    --dark-sm-border-s-o-hover: /* value */;
  "
></element>

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/o: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/o::before"
  style="
    --border-s-before: /* value */;
    --border-s-o-before: /* value */;
  "
></element>

<element
  class="content-after border-s/o::after"
  style="
    --border-s-after: /* value */;
    --border-s-o-after: /* value */;
  "
></element>

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/o=value" />

<!-- Output -->
<element class="border-s/o" style="--border-s: 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/o Sets border-inline-start color + opacity independently via --border-s and --border-s-o.

border-e/o

Sets border-inline-end color + opacity independently via --border-e and --border-e-o.

CSS Rules 

.border-e\/o {
  border-inline-end-color: color-mix(in oklab, var(--border-e) var(--border-e-o, 100%), transparent);
}

Usage

The .border-e/o class is flagged as a value-driven selector. The variables --border-e and --border-e-o are required. 
<element
  class="border-e/o"
  style="
    --border-e: /* value */;
    --border-e-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .border-e/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element
  class="md:border-e/o"
  style="
    --md-border-e: /* value */;
    --md-border-e-o: /* value */;
  "
></element>

<element
  class="dark:sm:border-e/o"
  style="
    --dark-sm-border-e: /* value */;
    --dark-sm-border-e-o: /* value */;
  "
></element>

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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="border-e/o:hover"
  style="
    --border-e-hover: /* value */;
    --border-e-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:border-e/o:hover"
  style="
    --dark-sm-border-e-hover: /* value */;
    --dark-sm-border-e-o-hover: /* value */;
  "
></element>

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/o: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/o::before"
  style="
    --border-e-before: /* value */;
    --border-e-o-before: /* value */;
  "
></element>

<element
  class="content-after border-e/o::after"
  style="
    --border-e-after: /* value */;
    --border-e-o-after: /* value */;
  "
></element>

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/o=value" />

<!-- Output -->
<element class="border-e/o" style="--border-e: 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/o Sets border-inline-end color + opacity independently via --border-e and --border-e-o.

border-x/o

Sets border-inline color + opacity independently via --border-x and --border-x-o.

CSS Rules 

.border-x\/o {
  border-inline-color: color-mix(in oklab, var(--border-x) var(--border-x-o, 100%), transparent);
}

Usage

The .border-x/o class is flagged as a value-driven selector. The variables --border-x and --border-x-o are required. 
<element
  class="border-x/o"
  style="
    --border-x: /* value */;
    --border-x-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .border-x/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element
  class="md:border-x/o"
  style="
    --md-border-x: /* value */;
    --md-border-x-o: /* value */;
  "
></element>

<element
  class="dark:sm:border-x/o"
  style="
    --dark-sm-border-x: /* value */;
    --dark-sm-border-x-o: /* value */;
  "
></element>

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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="border-x/o:hover"
  style="
    --border-x-hover: /* value */;
    --border-x-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:border-x/o:hover"
  style="
    --dark-sm-border-x-hover: /* value */;
    --dark-sm-border-x-o-hover: /* value */;
  "
></element>

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/o: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/o::before"
  style="
    --border-x-before: /* value */;
    --border-x-o-before: /* value */;
  "
></element>

<element
  class="content-after border-x/o::after"
  style="
    --border-x-after: /* value */;
    --border-x-o-after: /* value */;
  "
></element>

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/o=value" />

<!-- Output -->
<element class="border-x/o" style="--border-x: 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/o Sets border-inline color + opacity independently via --border-x and --border-x-o.

border-y/o

Sets border-block color + opacity independently via --border-y and --border-y-o.

CSS Rules 

.border-y\/o {
  border-block-color: color-mix(in oklab, var(--border-y) var(--border-y-o, 100%), transparent);
}

Usage

The .border-y/o class is flagged as a value-driven selector. The variables --border-y and --border-y-o are required. 
<element
  class="border-y/o"
  style="
    --border-y: /* value */;
    --border-y-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .border-y/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first. 

<element
  class="md:border-y/o"
  style="
    --md-border-y: /* value */;
    --md-border-y-o: /* value */;
  "
></element>

<element
  class="dark:sm:border-y/o"
  style="
    --dark-sm-border-y: /* value */;
    --dark-sm-border-y-o: /* value */;
  "
></element>

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 and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="border-y/o:hover"
  style="
    --border-y-hover: /* value */;
    --border-y-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:border-y/o:hover"
  style="
    --dark-sm-border-y-hover: /* value */;
    --dark-sm-border-y-o-hover: /* value */;
  "
></element>

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/o: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/o::before"
  style="
    --border-y-before: /* value */;
    --border-y-o-before: /* value */;
  "
></element>

<element
  class="content-after border-y/o::after"
  style="
    --border-y-after: /* value */;
    --border-y-o-after: /* value */;
  "
></element>

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/o=value" />

<!-- Output -->
<element class="border-y/o" style="--border-y: 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/o Sets border-block color + opacity independently via --border-y and --border-y-o.