Logo Windi CSS

Границы

Закругленная граница

Утилиты для управления радиусом границы элемента.

none
sm
default
md
lg
xl
2xl
3xl
4xl
1/2
full
CSS
interpret
 Персонализация 
windi.config.js
export default {
  theme: {
    borderRadius: {
      none: '0',
      sm: '0.125rem',
      DEFAULT: '4px',
      md: '0.375rem',
      lg: '0.5rem',
      full: '9999px',
      large: '12px',
    },
  },
}

Толщина границы 
Утилиты для управления шириной границ элемента.
default
0
1
2
3
4
5
CSS
interpret
 Персонализация 
windi.config.js
export default {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      none: '0',
      sm: '2px',
    },
  },
}

Цвет границы 
Утилиты для управления цветом границ элемента.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
 Персонализация 
Вы можете настроить цветовую палитру, отредактировав раздел theme.colors в файле windi.config.js, или настроить только цвета границ, используя раздел theme.borderColor.
windi.config.js
export default {
  theme: {
    borderColor: theme => ({
      ...theme('colors'),
      DEFAULT: theme('colors.gray.300', 'currentColor'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

Непрозрачность границы 
Утилиты для управления непрозрачностью цвета границы элемента.
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      borderOpacity: {
        light: '0.1',
      },
    },
  },
}

Стиль границы 
Утилиты для управления стилем границ элемента.
solid
dashed
dotted
double
none
CSS
Разделить ширину 
Утилиты для управления шириной границы между элементами.
Разделить Y 
default
reverse
2
4
6
8
10
12
14
16
18
20
CSS
Разделить X 
default
reverse
2
4
6
8
10
12
14
16
18
20
CSS
 Персонализация 
Шкала ширины разделения по умолчанию наследует свои значения из шкалы borderWidth, поэтому, если вы хотите настроить свои значения для ширины границы и ширины разделения вместе, используйте раздел theme.borderWidth в файле windi.config.js.
windi.config.js
export default {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
  },
}

Чтобы настроить только значения ширины разделения, используйте раздел theme.divideWidth в файле windi.config.js.
windi.config.js
export default {
  theme: {
    divideWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
  },
}

Разделить цвет 
Утилиты для управления цветом границы между элементами.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    divideColor: theme => ({
      ...theme('borderColors'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

Разделить непрозрачность 
Утилиты для управления прозрачностью границ между элементами.
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      divideOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Разделить стиль 
Утилиты для управления стилем границы между элементами.
solid
dashed
dotted
double
none
CSS
Ширина кольца 
Утилиты для создания контуров колец с тенями.
default
inset
0
1
2
4
6
8
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      ringWidth: {
        DEFAULT: '2px',
        6: '6px',
        10: '10px',
      },
    },
  },
}

Цвет кольца 
Утилиты для настройки цвета контуров колец.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
 Персонализация 
windi.config.js
const colors = require('windicss/colors')

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

Непрозрачность кольца 
Утилиты для настройки прозрачности контуров колец.
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      ringOpacity: {
        15: '0.15',
        35: '0.35',
        65: '0.65',
      },
    },
  },
}

Ширина смещения кольца 
Утилиты для имитации смещения при добавлении контуров колец.
0
1
2
4
6
8
10
12
14
16
20
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      ringOffsetWidth: {
        3: '3px',
        6: '6px',
        10: '10px',
      },
    },
  },
}

Цвет смещения кольца 
Утилиты для настройки цвета смещения контура кольца.
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
 Персонализация 
windi.config.js
const colors = require('windicss/colors')

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