Borders

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
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

Divide Width

Utilities for controlling the border width between elements.

Divide Y

default
reverse
2
4
6
8
10
12
14
16
18
20
CSS

Divide X

default
reverse
2
4
6
8
10
12
14
16
18
20
CSS
Customizing

The divide width scale inherits its values from the borderWidth scale by default, so if you'd like to customize your values for both border width and divide width together, use the theme.borderWidth section of your windi.config.js file.

// windi.config.js
export default {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
  },
}

To customize only the divide width values, use the theme.divideWidth section of your windi.config.js file.

// windi.config.js
export default {
  theme: {
    divideWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
  },
}

Divide Color

Utilities for controlling the border color between elements.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
export default {
  theme: {
    divideColor: theme => ({
      ...theme('borderColors'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

Divide Opacity

Utilities for controlling the opacity borders between elements.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      divideOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Divide Style

Utilities for controlling the border style between elements.

solid
dashed
dotted
double
none
CSS

Ring Width

Utilities for creating outline rings with box-shadows.

default
inset
0
1
2
4
6
8
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      ringWidth: {
        DEFAULT: '2px',
        6: '6px',
        10: '10px',
      },
    },
  },
}

Ring Color

Utilities for setting the color of outline rings.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
const colors = require('windicss/colors')

export default {
  theme: {
    ringColor: {
      white: colors.white,
      pink: colors.fuchsia,
    },
  },
}

Ring Opacity

Utilities for setting the opacity of outline rings.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      ringOpacity: {
        15: '0.15',
        35: '0.35',
        65: '0.65',
      },
    },
  },
}

Ring Offset Width

Utilities for simulating an offset when adding outline rings.

0
1
2
4
6
8
10
12
14
16
20
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      ringOffsetWidth: {
        3: '3px',
        6: '6px',
        10: '10px',
      },
    },
  },
}

Ring Offset Color

Utilities for setting the color of outline ring offsets.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
const colors = require('windicss/colors')

export default {
  theme: {
    ringOffsetColor: {
      white: colors.white,
      pink: colors.fuchsia,
    },
  },
}