MonorailCss

Border Width

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

Class CSS Output
border 
border-style: var(--tw-border-style);
border-width: 1px;
}
border-2 
border-style: var(--tw-border-style);
border-width: 2px;
}
border-4 
border-style: var(--tw-border-style);
border-width: 4px;
}
border-red-500 
border-color: var(--color-red-500);
}
border-blue-600 
border-color: var(--color-blue-600);
}
border-t-4 
border-top-style: var(--tw-border-style);
border-top-width: 4px;
}
border-x-2 
border-inline-style: var(--tw-border-style);
border-inline-width: 2px;
}
border-red-500/50 
border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
border-[3px] 
border-style: var(--tw-border-style);
border-width: 3px;
}

border

border-style: var(--tw-border-style);
border-width: 1px;

border-2

border-style: var(--tw-border-style);
border-width: 2px;

border-4

border-style: var(--tw-border-style);
border-width: 4px;

border-red-500

border-color: var(--color-red-500);

border-blue-600

border-color: var(--color-blue-600);

border-t-4

border-top-style: var(--tw-border-style);
border-top-width: 4px;

border-x-2

border-inline-style: var(--tw-border-style);
border-inline-width: 2px;

border-red-500/50

border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);

border-[3px]

border-style: var(--tw-border-style);
border-width: 3px;

Reference

border-color MDN ↗
border-inline-style MDN ↗
border-inline-width MDN ↗
border-style MDN ↗
border-top-style MDN ↗
border-top-width MDN ↗
border-width MDN ↗

CSS Properties

  • border-color
  • border-inline-style
  • border-inline-width
  • border-style
  • border-top-style
  • border-top-width
  • border-width