Border Width

Utilities for controlling the width an element's borders.

Add borders to any element using the border{-side?}{-width} syntax.

For example, border would add a 1px border to all sides of the element, where border-b-4 would add a 4px border to the bottom of the element.

Class Side (optional) Width
border t Top
b Bottom
l Left
r Right
x Left & Right
y Top & Bottom
0
1 (default)
2
4
8

Customizing

By default BinStorm provides five border width size with all side utilities. You can change, add, or remove these by editing the borderRadius section of your BinStorm config.







 


 



  {
    // ...
    borderRadius: {
      'none': '0',
  -   'sm': '.125rem',
  -   'default': '.25rem',
  +   'default': '4px',
  -   'lg': '.5rem',
  -   'full': '9999px',
  +   'large': '12px',
    }
  }

Disabling

If you don't plan to use the border{-side?}{-width} utilities in your project, you can disable them entirely by removing the borderWidths property in the modules section of your config file:

{
  // ...
  modules: {
    // ...
-   borderWidths: {
-     prefix: 'border',
-     propertyName: 'borderWidth'
-      sides: {
-        '-l': 'left',
-        '-r': 'right',
-        '-t': 'top',
-        '-b': 'bottom',
-        '-x': ['left', 'right'],
-        '-y': ['top', 'bottom']
-     }
-   }
  }
}