Borders

Border Color

Utilities for controlling the color of an element's borders.

s-prefix

The s- (semantic) prefix signals that the color value of these will change with the brand css.

Quick reference

Basic usage

Setting the border color

Control the border color of an element using the border-{transparent | inherit | current} or s-border-{semantic color} utilities specified in the table above.

<div class="s-border-positive border-4 rounded-16 ..."></div>

Individual sides

Use the border-{l|r|t|b}-{transparent|inherit|current} or s-border-{l|r|t|b}-{semantic color} utilities to set the border color for only one side of an element.

<div class="s-border-l-positive border-4 ..."></div>
<div class="s-border-r-positive border-4 ..."></div>
<div class="s-border-t-positive border-4 ..."></div>
<div class="s-border-b-positive border-4 ..."></div>

Horizontal and vertical sides

Use the border-{x|y}-{transparent|inherit|current} or s-border-{x|y}-{semantic color} utilities to set the border color on two sides of an element at the same time.

<div class="s-border-x-positive border-4 ..."></div>
<div class="s-border-y-positive border-4 ..."></div>

Arbitrary values

If you need to use a one-off border-{color} value, use square brackets to generate a property on the fly using any arbitrary value. However, we recommend only using our semantic color tokens. This also works with or without an optional direction. border-{x|y|l|r|t|b}-[{any color value or css var}]

<div class="border-[--w-s-color-icon]">
  <!-- ... -->
</div>

Opacity

It is possible to control the opacity of an element’s border color by adding an optional alpha modifier. The modifier accepts any integer percentage value between 0 and 100. This works for both semantic and arbitrary classes with any primitive --w-{color} or semantic --w-s-color-{name} css variable.

Warning

Please be advised that by using primitive variables you will lose theming possibilities, therefore we highly recommend only using semantic classes and tokens.

<div class="s-border/50 hover:s-border/100 ..."></div>
<div class="s-border-t-primary/55 hover:s-border-t-primary/100 ..."></div>
<div class="border-x-[--w-s-color-background-positive/60] hover:border-x-[--w-s-color-background-positive/100] ..."></div>
<div class="border-y-[var(--w-black)/40] hover:border-y-[var(--w-black)/100] ..."></div>

Applying conditionally

Hover, focus and other states

Conditionally apply utility classes in different states using variant modifiers. For example, use hover:s-border-active to only apply the s-border-active utility on hover.

<div class="s-border hover:s-border-hover ..."></div>

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:s-border-positive to apply the s-border-positive utility at only medium screen sizes and above.

<div class="s-border md:s-border-positive ..."></div>