Границы

border: [ border-width, border-style, border-color ]

Задание границ для блока по всем четырём сторонам.

border-width: number

Толщина границ в пикселях.

border-style

Стиль границ:

solid  — граница сплошным цветом.

dotted  — граница точками.

dashed  — граница пунктиром.

border-color: Color

Цвет границ.

border-1

borderTop, borderRight, borderBottom, borderLeft: [ border-width, border-color ]

Задание индивидуальных границ для сторон блока. Возможен только solid стиль границ. Имеет приоритет над border и может комбинироваться с ними.

border-width: number

Толщина границ в пикселях.

border-color: Color

Цвет границ.

border-2

borderRadius: number

number — единый радиус по всем четырём углам.

[ number, number, number, number ]  — индивидуальные радиусы, начиная с левого верхнего и далее по часовой стрелке.

border-3

borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius: number

Скругление индивидуальных углов границ. Имеет приоритет над borderRadius и может комбинироваться с ними.

border-4

borderWidth: number

Задание толщины границ. Возможно задание как единой толщины на весь блок, так и индивидуальных сторон. Имеет приоритет над border и может комбинироваться с ними.

number  — единая толщина по всем четырём сторонам.

[ number, number ]  — разная толщина горизонтальных и вертикальных границ блока. Первый элемент массива указывает толщину горизонтальных границ, а второй вертикальных.

[ number, number, number ]  — разная толщина верхней, нижней и вертикальных границ блока. Первый элемент массива указывает толщину верхней границы, второй толщину вертикальных границ и последний толщину нижней.

[ number, number, number, number ]  — разная толщина по всем четырём сторонам. Первый элемент массива указывает толщину верхней границы, и последующие элементы задают толщину по часовой стрелке.

border-5

borderTopWidth, borderRightWidth, borderBottomWidth,borderLeftWidth: border-width

Задание индивидуальной толщины границ. Имеет приоритет над border и borderWidth. Может комбинироваться с ними.

border-6

borderColor: Color

Задание цвета границ. Имеет приоритет над border и может комбинироваться с ним.

Color  — единый цвет по всем четырём граням.

[ Color, Color ]  — разный цвет горизонтальных и вертикальных границ блока. Первый элемент массива указывает цвет горизонтальных границ, а второй вертикальных.

[ Color, Color, Color ]  — разный цвет сверзу, снизу и по горизонтали блока. Первый элемент массива указывает цвет верхней границы, второй цвет по горизонтали и последний цвет нижней.

[ Color, Color, Color, Color ]  — разный цвет по всем четырём сторонам. Первый элемент массива указывает цвет верхней границы, и последующие элементы задают цвет по часовой стрелке.

border-7

borderTopColor, borderRightColor, borderBottomColor,borderLeftColor: Color

Задание индивидуального цвета границ. Имеет приоритет над borderColor и border. Может комбинироваться с ними.

border-7

❤️ Made with love on Chatium

ООО "Чатиум"

Информация о компании