Border Utilities

NuvoUI provides a comprehensive system of border utilities to control border width, style, color, and border radius. These utilities make it easy to add and customize borders throughout your application.

Configuration

NuvoUI's border system is built around several configurable variables:

Border Widths

The border width utilities are generated from the VAR.$border-widths variable which defines the available border widths.

Border Radii

Border radius utilities are generated from the VAR.$border-radii map which defines preset radius values.

Border Styles

Border style utilities are generated from the $border-styles list:

Theme Colors for Borders

Border color utilities use theme color variables defined in the configuration. You can customize these colors in your theme configuration file.

Border Width Utilities

Control the width of borders on all sides or individual sides of an element.

All Sides

Individual Sides

Border Styles

Change the style of borders with border style utilities:

Border Colors

Apply different colors to borders using the built-in border color utilities

info

All the colors which are set in the theme configuration can be used as border colors. including semantic-colors like (primary, danger etc.), $color-primitives and $basic-colors

Combined Border Style and Color

NuvoUI provides convenient combined utilities for common border style and color combinations:

Border Radius (Rounded Corners)

Control the rounding of corners with border radius utilities:

All Corners

Individual Corners

Interactive States

NuvoUI provides utilities to change border properties on different interactive states:

Hover State

Focus State

Active State

Responsive Border Utilities

Change border properties at different breakpoints using the @breakpoint notation:

Common UI Patterns

Cards with Borders

Form Elements

Tables with Borders

Dividers

Buttons with Borders

SCSS Mixins

NuvoUI provides a comprehensive set of border mixins for direct use in your SCSS:

Border Width Mixins

Mixin	Description	Parameters
`@include border($val, $style: solid, $color: var(--border))`	Applies border to all sides	`$val`: Border width `$style`: Border style (default: solid) `$color`: Border color (default: var(--border))
`@include border-top($val)`	Applies border to top	`$val`: Border width
`@include border-right($val)`	Applies border to right	`$val`: Border width
`@include border-bottom($val)`	Applies border to bottom	`$val`: Border width
`@include border-left($val)`	Applies border to left	`$val`: Border width

Border Radius Mixins

Mixin	Description	Parameters
`@include rounded($val: null)`	Applies border radius to all corners	`$val`: Radius value (uses 'md' from `VAR.$border-radii` if null)
`@include rounded-t($val: null)`	Applies border radius to top corners	`$val`: Radius value
`@include rounded-r($val: null)`	Applies border radius to right corners	`$val`: Radius value
`@include rounded-b($val: null)`	Applies border radius to bottom corners	`$val`: Radius value
`@include rounded-l($val: null)`	Applies border radius to left corners	`$val`: Radius value
`@include rounded-tl($val: null)`	Applies border radius to top left corner	`$val`: Radius value
`@include rounded-tr($val: null)`	Applies border radius to top right corner	`$val`: Radius value
`@include rounded-br($val: null)`	Applies border radius to bottom right corner	`$val`: Radius value
`@include rounded-bl($val: null)`	Applies border radius to bottom left corner	`$val`: Radius value
`@include pill`	Applies pill shape radius (9999px)	None

Border Style and Color Mixins

Mixin	Description	Parameters
`@include border-style($style)`	Sets the border style	`$style`: Border style (solid, dashed, etc.)
`@include border-color($color)`	Sets the border color	`$color`: Border color
`@include border-all($width, $style, $color)`	Sets width, style and color for all borders	`$width`: Border width `$style`: Border style `$color`: Border color

Example SCSS Usage