Logo Windi CSS

Border

Border Radius

Utilities for controlling the border radius of an element.

none
sm
default
md
lg
xl
2xl
3xl
4xl
1/2
full
CSS
interpret
 Customizing 
windi.config.js
export default {
  theme: {
    borderRadius: {
      none: '0',
      sm: '0.125rem',
      DEFAULT: '4px',
      md: '0.375rem',
      lg: '0.5rem',
      full: '9999px',
      large: '12px',
    },
  },
}

Border Width 
Utilities for controlling the width of an element's borders.
default
0
1
2
3
4
5
CSS
interpret
 Customizing 
windi.config.js
export default {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      none: '0',
      sm: '2px',
    },
  },
}

Border Color 
Utilities for controlling the color of an element's borders.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
You can customize your color palette by editing the theme.colors section of your windi.config.js file, or customize just your border colors using the theme.borderColor section.
windi.config.js
export default {
  theme: {
    borderColor: theme => ({
      ...theme('colors'),
      DEFAULT: theme('colors.gray.300', 'currentColor'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

Border Opacity 
Utilities for controlling the opacity of an element's border color.
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      borderOpacity: {
        light: '0.1',
      },
    },
  },
}

Border Style 
Utilities for controlling the style of an element's borders.
solid
dashed
dotted
double
none
CSS