Styleframe Logo
Utilities

Borders Utilities

Create border utilities for colors, widths, radiuses, styles, outlines, and focus rings with full type safety.
Part of the Utilities Preset: The utilities on this page are registered by the Utilities Preset (useUtilitiesPreset). For most projects, applying them via the preset is the recommended approach.

Overview

Border utilities help you control border styling including colors, widths, radiuses, styles, outlines, and focus rings. These utilities include directional variants for fine-grained control.

Why Use Border Utilities?

Border utilities help you:

  • Create consistent borders: Generate reusable border styles across your application
  • Support directional control: Apply borders to specific sides or use logical properties for RTL support
  • Integrate with design tokens: Reference your color and spacing systems with ref()
  • Build accessible focus states: Create visible focus rings for keyboard navigation

useBorderColorUtility

The useBorderColorUtility() function creates utility classes for setting border colors.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useColorDesignTokens } from "@styleframe/theme";
import { useBorderColorUtility } from "@styleframe/theme";

const s = styleframe();
const { ref } = s;

const { colorPrimary, colorGray300 } = useColorDesignTokens(s, {
    primary: '#006cff',
    gray300: '#d1d5db',
} as const);

useBorderColorUtility(s, {
    inherit: 'inherit',
    current: 'currentColor',
    transparent: 'transparent',
    primary: ref(colorPrimary),
    gray: ref(colorGray300),
});

export default s;

Directional Variants

Border color utilities include directional variants for applying colors to specific sides:

UtilityDescription
useBorderColorUtilityAll sides
useBorderColorXUtilityLeft and right
useBorderColorYUtilityTop and bottom
useBorderColorTopUtilityTop only
useBorderColorRightUtilityRight only
useBorderColorBottomUtilityBottom only
useBorderColorLeftUtilityLeft only
useBorderColorStartUtilityInline start (RTL-aware)
useBorderColorEndUtilityInline end (RTL-aware)

useBorderWidthUtility

The useBorderWidthUtility() function creates utility classes for setting border widths.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBorderWidthUtility } from "@styleframe/theme";

const s = styleframe();

useBorderWidthUtility(s, {
    '0': '0px',
    '1': '1px',
    '2': '2px',
    '4': '4px',
    '8': '8px',
});

export default s;

Directional Variants

Border width utilities include directional variants for applying widths to specific sides:

UtilityDescription
useBorderWidthUtilityAll sides
useBorderWidthXUtilityLeft and right
useBorderWidthYUtilityTop and bottom
useBorderWidthTopUtilityTop only
useBorderWidthRightUtilityRight only
useBorderWidthBottomUtilityBottom only
useBorderWidthLeftUtilityLeft only
useBorderWidthStartUtilityInline start (RTL-aware)
useBorderWidthEndUtilityInline end (RTL-aware)

useBorderRadiusUtility

The useBorderRadiusUtility() function creates utility classes for setting border radius.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBorderRadiusUtility } from "@styleframe/theme";

const s = styleframe();

useBorderRadiusUtility(s, {
    none: '0px',
    sm: '0.125rem',
    default: '0.25rem',
    md: '0.375rem',
    lg: '0.5rem',
    xl: '0.75rem',
    '2xl': '1rem',
    '3xl': '1.5rem',
    full: '9999px',
});

export default s;

Directional Radius Variants

Border radius utilities include variants for rounding specific corners:

UtilityDescription
useBorderRadiusUtilityAll corners
useBorderRadiusTopUtilityTop left and top right
useBorderRadiusRightUtilityTop right and bottom right
useBorderRadiusBottomUtilityBottom left and bottom right
useBorderRadiusLeftUtilityTop left and bottom left
useBorderRadiusStartUtilityStart corners (RTL-aware)
useBorderRadiusEndUtilityEnd corners (RTL-aware)
useBorderRadiusTopLeftUtilityTop left only
useBorderRadiusTopRightUtilityTop right only
useBorderRadiusBottomRightUtilityBottom right only
useBorderRadiusBottomLeftUtilityBottom left only

useBorderStyleUtility

The useBorderStyleUtility() function creates utility classes for setting border styles.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBorderStyleUtility } from "@styleframe/theme";

const s = styleframe();

// Uses built-in defaults: solid, dashed, dotted, double, hidden, none
useBorderStyleUtility(s);

export default s;

Default Values

KeyValueDescription
solidsolidSolid line border
dasheddashedDashed line border
dotteddottedDotted line border
doubledoubleDouble line border
hiddenhiddenHidden border (takes up space)
nonenoneNo border

useOutlineWidthUtility

The useOutlineWidthUtility() function creates utility classes for setting outline widths.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useOutlineWidthUtility, useOutlineStyleUtility, useOutlineColorUtility } from "@styleframe/theme";

const s = styleframe();

useOutlineWidthUtility(s, {
    '0': '0px',
    '1': '1px',
    '2': '2px',
    '4': '4px',
});

useOutlineStyleUtility(s); // Uses defaults

useOutlineColorUtility(s, {
    primary: '#006cff',
    transparent: 'transparent',
});

export default s;

Outline Utilities

UtilityDescription
useOutlineWidthUtilitySet outline width
useOutlineColorUtilitySet outline color
useOutlineStyleUtilitySet outline style (has defaults)
useOutlineOffsetUtilitySet outline offset

useRingWidthUtility

The ring utilities create focus ring effects using box-shadow. This is useful for accessible focus indicators that don't affect layout.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useRingWidthUtility, useRingColorUtility, useRingOffsetWidthUtility } from "@styleframe/theme";

const s = styleframe();

useRingWidthUtility(s, {
    '0': '0px',
    '1': '1px',
    '2': '2px',
    default: '3px',
    '4': '4px',
});

useRingColorUtility(s, {
    primary: '#006cff',
    white: '#fff',
});

useRingOffsetWidthUtility(s, {
    '0': '0px',
    '1': '1px',
    '2': '2px',
});

export default s;

Ring Utilities

UtilityDescription
useRingWidthUtilitySet ring width
useRingColorUtilitySet ring color
useRingInsetUtilityMake ring inset
useRingOffsetWidthUtilitySet ring offset width
useRingOffsetColorUtilitySet ring offset color
Pro tip: Ring utilities use CSS custom properties, so you can customize ring color and offset independently from ring width.

Examples

Card with Rounded Corners

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBorderRadiusUtility, useBorderWidthUtility, useBorderColorUtility } from "@styleframe/theme";
import { useColorDesignTokens } from "@styleframe/theme";

const s = styleframe();
const { ref } = s;

const { colorGray200 } = useColorDesignTokens(s, { gray200: '#e5e7eb' } as const);

useBorderRadiusUtility(s, {
    md: '0.375rem',
    lg: '0.5rem',
    xl: '0.75rem',
});

useBorderWidthUtility(s, {
    '1': '1px',
});

useBorderColorUtility(s, {
    gray: ref(colorGray200),
});

export default s;

Usage in HTML:

<div class="_border-width:1 _border-color:gray _border-radius:lg">
    Card content
</div>

Focus Ring for Buttons

styleframe.config.ts
import { styleframe } from "styleframe";
import { useRingWidthUtility, useRingColorUtility, useRingOffsetWidthUtility } from "@styleframe/theme";
import { useColorDesignTokens } from "@styleframe/theme";

const s = styleframe();
const { ref, selector, modifier } = s;

const { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);

useRingWidthUtility(s, { '2': '2px', default: '3px' });
useRingColorUtility(s, { primary: ref(colorPrimary) });
useRingOffsetWidthUtility(s, { '2': '2px' });

// Create a focus modifier
const focus = modifier('focus', ({ declarations }) => ({
    '&:focus': declarations,
}));

// Apply focus ring with modifier
useRingWidthUtility(s, { '2': '2px' }, [focus]);

export default s;

Best Practices

  • Use design tokens: Reference your color variables with ref() for consistent border colors
  • Consider accessibility: Ensure sufficient contrast for borders, especially for form inputs
  • Use ring for focus states: Ring utilities don't affect layout, making them ideal for focus indicators
  • Leverage logical properties: Use start/end variants for RTL-friendly designs
  • Be consistent with radius: Use a consistent radius scale across your components
  • Test border styles: Dashed and dotted borders render differently across browsers

FAQ

Backgrounds

Create background utilities for colors, images, sizing, positioning, and more with full type safety.

Effects

Create effect utilities for shadows, opacity, and blend modes with full type safety.