Overview Control border thickness with static and fluid border width utilities. Border width works together with border style, color, and radius to create complete border styling.
Static Border Width
Border Width .border-00 border-width: 0;No border .border-11px border-width: 1px;Thin border .border-22px border-width: 2px;Medium border .border-44px border-width: 4px;Thick border .border-88px border-width: 8px;Extra thick border .border-1010px border-width: 10px;Very thick border .border-1515px border-width: 15px;Ultra thick border .border-2020px border-width: 20px;Maximum border
Fluid Border Width Fluid border width utilities use clamp() to scale smoothly between mobile and desktop sizes, perfect for responsive borders.
Fluid Border Width Class Clamp Expression Mobile → Desktop .border-fluid-1clamp(0.0625rem, calc(0.053rem + 0.023vw), 0.078rem)1px → 1.25px .border-fluid-2clamp(0.125rem, calc(0.107rem + 0.046vw), 0.156rem)2px → 2.5px .border-fluid-4clamp(0.25rem, calc(0.21rem + 0.09vw), 0.31rem)4px → 5px .border-fluid-8clamp(0.5rem, calc(0.43rem + 0.18vw), 0.63rem)8px → 10px .border-fluid-10clamp(0.625rem, calc(0.53rem + 0.22vw), 0.78rem)10px → 12.5px .border-fluid-15clamp(0.94rem, calc(0.8rem + 0.33vw), 1.17rem)15px → 18.75px .border-fluid-20clamp(1.25rem, calc(1.07rem + 0.44vw), 1.56rem)20px → 25px
Examples Static Border Width <!-- Border width examples --> < div class = "border-1 p-4 bg-white" > Thin border </ div > < div class = "border-2 p-4 bg-white" > Medium border </ div > < div class = "border-4 p-4 bg-white" > Thick border </ div > < div class = "border-0 p-4 bg-gray-light" > No border </ div > Fluid Border Width <!-- Card with fluid border --> < div class = "border-fluid-2 border-gray rounded-lg p-fluid-6 bg-white" > < h3 class = "text-xl font-semibold mb-fluid-2" > Card Title </ h3 > < p class = "text-gray" > Content with responsive border </ p > </ div > <!-- Hero section with fluid accent border --> < section class = "border-fluid-8 border-blue rounded-xl p-fluid-12" > < h1 class = "text-fluid-6xl font-bold" > Hero Title </ h1 > </ section > Common Patterns <!-- Normal input --> < input type = "text" class = "w-full p-3 border border-gray rounded" placeholder = "Normal input" > <!-- Focused input --> < input type = "text" class = "w-full p-3 border-2 border-blue rounded" placeholder = "Focused input" > <!-- Error input --> < input type = "text" class = "w-full p-3 border-2 border-red rounded" placeholder = "Error input" > Accent Borders <!-- Left accent border --> < div class = "border-l-4 border-blue bg-blue-light p-6 rounded" > < h3 class = "text-lg font-600 mb-2" > Accent Border </ h3 > < p class = "text-gray" > Left accent border for emphasis </ p > </ div > Best Practices
Use consistent widths: Stick to the predefined border widths (1px, 2px, 4px) for consistencyThin for subtle: Use 1px borders for subtle separationThick for emphasis: Use 2px+ borders for important elementsFluid for responsive: Use fluid border width utilities for borders that need to scale smoothly
Use fluid border width utilities for borders that need to scale smoothly across viewport sizes. They work especially well for accent borders and decorative elements.
