Windi CSSBorder
Border Radius
Utilities for controlling the border radius of an element.
none
sm
default
md
lg
xl
2xl
3xl
4xl
1/2
full
CSS
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
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