Borders & Dividers
This section includes border and divider utilities to define edges, separate content, and create visual hierarchy across layouts.
Style
Defines the base border style used across components before width, color, radius, corner, or side-specific combo classes are added.
Width
Sets the thickness of borders using predefined width values for consistent visual weight.
Color
Controls the color of borders using predefined color variables for consistent visual hierarchy.
Radius
Defines standard border radius values used across components to ensure consistent rounding.
Standard Sizes
Reusable size options for general UI elements, utilities, and new components.
Component Specific
Predefined values tailored for specific components and UI elements to keep radius treatments consistent across the system.
Popper Menu
border-radius-popper-menu
Reset
tablet-border-radius-none
mobile-border-radius-none
mobile-portrait-border-radius-none
Corners
Utility classes for controlling individual corner rounding without affecting the entire border radius.
Bottom / Left
border-corner-bottom-left
Bottom / Right
border-corner-bottom-right
Reset
Resets existing borders to allow precise control across layouts and breakpoints.
mobile-portrait-border-none
Divider
Divider styles designed to adapt to both horizontal and vertical layouts. Optimized for flex containers that stretch child elements, allowing dividers to naturally expand based on direction; combo classes enable structured use in non-flex layouts.
Divider styles can be customized by combining them with the border color and border width classes defined above.