ChatiumFor developersPlaygroundPricing
Sign in

Borders

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

Setting borders for a block on all four sides.

border-width: number

Thickness of the borders in pixels.

border-style

Style of the borders:

solid  — solid color border.

dotted  — dotted border.

dashed  — dashed border.

border-color: Color

Color of the borders.

border-1

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

Setting individual borders for the sides of a block. Only solid style is allowed. It takes precedence over border and can be combined with it.

border-width: number

Thickness of the borders in pixels.

border-color: Color

Color of the borders.

border-2

borderRadius: number

number — a uniform radius for all four corners.

[ number, number, number, number ]  — individual radii, starting from the top left and proceeding clockwise.

border-3

borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius: number

Rounding of individual corners of the borders. It takes precedence over borderRadius and can be combined with it.

border-4

borderWidth: number

Setting the thickness of the borders. It is possible to set either a uniform thickness for the entire block or individual sides. It takes precedence over border and can be combined with it.

number  — uniform thickness for all four sides.

[ number, number ]  — different thickness for horizontal and vertical borders of the block. The first element of the array specifies the thickness of the horizontal borders, and the second specifies the vertical ones.

[ number, number, number ]  — different thickness for the top, bottom, and vertical borders of the block. The first element of the array specifies the thickness of the top border, the second specifies the thickness of the vertical borders, and the last specifies the thickness of the bottom border.

[ number, number, number, number ]  — different thickness for all four sides. The first element of the array specifies the thickness of the top border, and the subsequent elements specify the thickness in a clockwise direction.

border-5

borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth: border-width

Setting individual thickness for the borders. It takes precedence over border and borderWidth. It can be combined with them.

border-6

borderColor: Color

Setting the color of the borders. It takes precedence over border and can be combined with it.

Color  — a uniform color for all four edges.

[ Color, Color ]  — different colors for horizontal and vertical borders of the block. The first element of the array specifies the color of the horizontal borders, and the second specifies the vertical ones.

[ Color, Color, Color ]  — different colors for the top, bottom, and horizontal borders of the block. The first element of the array specifies the color of the top border, the second specifies the color for the horizontal borders, and the last specifies the color of the bottom border.

[ Color, Color, Color, Color ]  — different colors for all four sides. The first element of the array specifies the color of the top border, and the subsequent elements specify the color in a clockwise direction.

border-7

borderTopColor, borderRightColor, borderBottomColor, borderLeftColor: Color

Setting individual colors for the borders. It takes precedence over borderColor and border. It can be combined with them.

border-7