@wix/design-system/dist/docs/components/BoxProps.md

@wix/design-system

### inline
- type: boolean
- description: Defines if the box behaves as an inline element
### direction
- type: BoxDirection
- description: Defines how the children are ordered (horizontally or vertically)
### children
- type: ReactNode
- description: Allows to render any component as a child item
### className
- type: string
- description: Specifies a CSS class name to be appended to the component’s root element.
### align
- type: BoxHorizontalAlignment
- description: Defines how the children are aligned according to the X axis
### verticalAlign
- type: "bottom" | "top" | "middle" | "space-between"
- description: Defines how the children are aligned according to the Y axis
The **`vertical-align`** CSS property sets vertical alignment of an inline, inline-block or table-cell box.

*Syntax**: `baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>`

*Initial value**: `baseline`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### dataHook
- type: string
- description: Accepts HTML attributes that can be used in the tests
### data-hook
- type: string
- description: Accepts HTML attributes that can be used in the tests
### gap
- type: any
- description: Sets the gaps/gutters between flex items.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.)
The **`gap`** CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for `row-gap` and `column-gap`.

*Syntax**: `<'row-gap'> <'column-gap'>?`

| Chrome | Firefox |  Safari  |  Edge  | IE  |
| :----: | :-----: | :------: | :----: | :-: |
| **57** | **52**  | **10.1** | **16** | No  |
### border
- type: string
- description: Enables a border and sets its width and style. This prop does not include WSR color variable keys.
The **`border`** shorthand CSS property sets an element's border. It sets the values of `border-width`, `border-style`, and `border-color`.

*Syntax**: `<line-width> || <line-style> || <color>`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### style
- type: CSSProperties
- description: Sets object of CSS styles
### color
- type: string
- description: Sets a text color by a key from the color palette or natively supported value (Hex, RGB, etc.)
The **`color`** CSS property sets the foreground color value of an element's text and text decorations, and sets the `<currentcolor>` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.

*Syntax**: `<color>`

*Initial value**: `canvastext`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **3** |
### backgroundColor
- type: string
- description: Sets a background color by a key from the color palette or natively supported value (Hex, RGB, etc.)
The **`background-color`** CSS property sets the background color of an element.

*Syntax**: `<color>`

*Initial value**: `transparent`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### borderColor
- type: string
- description: Sets a border color by a key from the color palette or natively supported value (Hex, RGB, etc.)
The **`border-color`** shorthand CSS property sets the color of an element's border.

*Syntax**: `<color>{1,4}`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### borderTopColor
- type: string
- description: Sets a border top color by a key from the color palette or natively supported value (Hex, RGB, etc.)
The **`border-top-color`** CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties `border-color` or `border-top`.

*Syntax**: `<color>`

*Initial value**: `currentcolor`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### borderRightColor
- type: string
- description: Sets a border right color by a key from the color palette or natively supported value (Hex, RGB, etc.)
The **`border-right-color`** CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties `border-color` or `border-right`.

*Syntax**: `<color>`

*Initial value**: `currentcolor`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### borderBottomColor
- type: string
- description: Sets a border bottom color by a key from the color palette or natively supported value (Hex, RGB, etc.)
The **`border-bottom-color`** CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties `border-color` or `border-bottom`.

*Syntax**: `<'border-top-color'>`

*Initial value**: `currentcolor`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### borderLeftColor
- type: string
- description: Sets a border left color by a key from the color palette or natively supported value (Hex, RGB, etc.)
The **`border-left-color`** CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties `border-color` or `border-left`.

*Syntax**: `<color>`

*Initial value**: `currentcolor`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### margin
- type: any
- description: Sets margin on all sides.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
The **`margin`** CSS shorthand property sets the margin area on all four sides of an element.

*Syntax**: `[ <length> | <percentage> | auto ]{1,4}`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **3** |
### marginTop
- type: any
- description: Sets margin on the top.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

*Syntax**: `<length> | <percentage> | auto`

*Initial value**: `0`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **3** |
### marginRight
- type: any
- description: Sets margin on the right.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

*Syntax**: `<length> | <percentage> | auto`

*Initial value**: `0`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **3** |
### marginBottom
- type: any
- description: Sets margin on the bottom.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

*Syntax**: `<length> | <percentage> | auto`

*Initial value**: `0`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **3** |
### marginLeft
- type: any
- description: Sets margin on the left.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

*Syntax**: `<length> | <percentage> | auto`

*Initial value**: `0`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **3** |
### padding
- type: any
- description: Sets padding on all sides.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
The **`padding`** CSS shorthand property sets the padding area on all four sides of an element at once.

*Syntax**: `[ <length> | <percentage> ]{1,4}`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### paddingTop
- type: any
- description: Sets padding on the top.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
The **`padding-top`** CSS property sets the height of the padding area on the top of an element.

*Syntax**: `<length> | <percentage>`

*Initial value**: `0`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### paddingRight
- type: any
- description: Sets padding on the right.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
The **`padding-right`** CSS property sets the width of the padding area on the right of an element.

*Syntax**: `<length> | <percentage>`

*Initial value**: `0`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### paddingBottom
- type: any
- description: Sets padding on the bottom.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.

*Syntax**: `<length> | <percentage>`

*Initial value**: `0`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### paddingLeft
- type: any
- description: Sets padding on the left.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
The **`padding-left`** CSS property sets the width of the padding area to the left of an element.

*Syntax**: `<length> | <percentage>`

*Initial value**: `0`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### minWidth
- type: any
- description: Sets the minimum width of the box in pixels
The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`.

*Syntax**: `auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)`

*Initial value**: `auto`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **7** |
### maxWidth
- type: any
- description: Sets the maximum width of the box in pixels
The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.

*Syntax**: `none | <length-percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)`

*Initial value**: `none`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **7** |
### width
- type: any
- description: Sets the width of the box in pixels
The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.

*Syntax**: `auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)`

*Initial value**: `auto`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### minHeight
- type: any
- description: Sets the minimum height of the box in pixels
The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`.

*Syntax**: `auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)`

*Initial value**: `auto`

| Chrome | Firefox | Safari  |  Edge  |  IE   |
| :----: | :-----: | :-----: | :----: | :---: |
| **1**  |  **3**  | **1.3** | **12** | **7** |
### maxHeight
- type: any
- description: Sets the maximum height of the box in pixels
The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`.

*Syntax**: `none | <length-percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)`

*Initial value**: `none`

| Chrome | Firefox | Safari  |  Edge  |  IE   |
| :----: | :-----: | :-----: | :----: | :---: |
| **18** |  **1**  | **1.3** | **12** | **7** |
### height
- type: any
- description: Sets the height of the box in pixels
The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area.

*Syntax**: `auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)`

*Initial value**: `auto`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### accentColor
- type: AccentColor
- description: The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements.

*Syntax**: `auto | <color>`

*Initial value**: `auto`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **93** | **92**  | **15.4** | n/a  | No  |
### alignContent
- type: AlignContent
- description: The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

*Syntax**: `normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>`

*Initial value**: `normal`

|  Chrome  | Firefox | Safari  |  Edge  |   IE   |
| :------: | :-----: | :-----: | :----: | :----: |
|  **29**  | **28**  |  **9**  | **12** | **11** |
| 21 _-x-_ |         | 7 _-x-_ |        |        |
### alignSelf
- type: AlignSelf
- description: The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

*Syntax**: `auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>`

*Initial value**: `auto`

|  Chrome  | Firefox | Safari  |  Edge  |   IE   |
| :------: | :-----: | :-----: | :----: | :----: |
|  **29**  | **20**  |  **9**  | **12** | **10** |
| 21 _-x-_ |         | 7 _-x-_ |        |        |
### alignTracks
- type: AlignTracks
- description: The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis.

*Syntax**: `[ normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> ]#`

*Initial value**: `normal`

| Chrome | Firefox | Safari | Edge | IE  |
| :----: | :-----: | :----: | :--: | :-: |
|   No   |   n/a   |   No   | n/a  | No  |
### animationComposition
- type: AnimationComposition
- description: The **`animation-composition`** CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.

*Syntax**: `<single-animation-composition>#`

*Initial value**: `replace`

| Chrome | Firefox | Safari | Edge | IE  |
| :----: | :-----: | :----: | :--: | :-: |
|   No   |   n/a   |   No   | n/a  | No  |
### animationDelay
- type: AnimationDelay<string & {}>
- description: The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.

*Syntax**: `<time>#`

*Initial value**: `0s`

| Chrome  | Firefox | Safari  |  Edge  |   IE   |
| :-----: | :-----: | :-----: | :----: | :----: |
| **43**  | **16**  |  **9**  | **12** | **10** |
| 3 _-x-_ | 5 _-x-_ | 4 _-x-_ |        |        |
### animationDirection
- type: AnimationDirection
- description: The **`animation-direction`** CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

*Syntax**: `<single-animation-direction>#`

*Initial value**: `normal`

| Chrome  | Firefox | Safari  |  Edge  |   IE   |
| :-----: | :-----: | :-----: | :----: | :----: |
| **43**  | **16**  |  **9**  | **12** | **10** |
| 3 _-x-_ | 5 _-x-_ | 4 _-x-_ |        |        |
### animationDuration
- type: AnimationDuration<string & {}>
- description: The **`animation-duration`** CSS property sets the length of time that an animation takes to complete one cycle.

*Syntax**: `<time>#`

*Initial value**: `0s`

| Chrome  | Firefox | Safari  |  Edge  |   IE   |
| :-----: | :-----: | :-----: | :----: | :----: |
| **43**  | **16**  |  **9**  | **12** | **10** |
| 3 _-x-_ | 5 _-x-_ | 4 _-x-_ |        |        |
### animationFillMode
- type: AnimationFillMode
- description: The **`animation-fill-mode`** CSS property sets how a CSS animation applies styles to its target before and after its execution.

*Syntax**: `<single-animation-fill-mode>#`

*Initial value**: `none`

| Chrome  | Firefox | Safari  |  Edge  |   IE   |
| :-----: | :-----: | :-----: | :----: | :----: |
| **43**  | **16**  |  **9**  | **12** | **10** |
| 3 _-x-_ | 5 _-x-_ | 5 _-x-_ |        |        |
### animationIterationCount
- type: AnimationIterationCount
- description: The **`animation-iteration-count`** CSS property sets the number of times an animation sequence should be played before stopping.

*Syntax**: `<single-animation-iteration-count>#`

*Initial value**: `1`

| Chrome  | Firefox | Safari  |  Edge  |   IE   |
| :-----: | :-----: | :-----: | :----: | :----: |
| **43**  | **16**  |  **9**  | **12** | **10** |
| 3 _-x-_ | 5 _-x-_ | 4 _-x-_ |        |        |
### animationName
- type: AnimationName
- description: The **`animation-name`** CSS property specifies the names of one or more `@keyframes` at-rules describing the animation or animations to apply to the element.

*Syntax**: `[ none | <keyframes-name> ]#`

*Initial value**: `none`

| Chrome  | Firefox | Safari  |  Edge  |   IE   |
| :-----: | :-----: | :-----: | :----: | :----: |
| **43**  | **16**  |  **9**  | **12** | **10** |
| 3 _-x-_ | 5 _-x-_ | 4 _-x-_ |        |        |
### animationPlayState
- type: AnimationPlayState
- description: The **`animation-play-state`** CSS property sets whether an animation is running or paused.

*Syntax**: `<single-animation-play-state>#`

*Initial value**: `running`

| Chrome  | Firefox | Safari  |  Edge  |   IE   |
| :-----: | :-----: | :-----: | :----: | :----: |
| **43**  | **16**  |  **9**  | **12** | **10** |
| 3 _-x-_ | 5 _-x-_ | 4 _-x-_ |        |        |
### animationTimeline
- type: AnimationTimeline
- description: The **`animation-timeline`** CSS property specifies the names of one or more `@scroll-timeline` at-rules describing the scroll animations to apply to the element.

*Syntax**: `<single-animation-timeline>#`

*Initial value**: `auto`

| Chrome | Firefox | Safari | Edge | IE  |
| :----: | :-----: | :----: | :--: | :-: |
|   No   |   n/a   |   No   | n/a  | No  |
### animationTimingFunction
- type: AnimationTimingFunction
- description: The **`animation-timing-function`** CSS property sets how an animation progresses through the duration of each cycle.

*Syntax**: `<easing-function>#`

*Initial value**: `ease`

| Chrome  | Firefox | Safari  |  Edge  |   IE   |
| :-----: | :-----: | :-----: | :----: | :----: |
| **43**  | **16**  |  **9**  | **12** | **10** |
| 3 _-x-_ | 5 _-x-_ | 4 _-x-_ |        |        |
### appearance
- type: Appearance
- description: The **`appearance`** CSS property is used to display an element using platform-native styling, based on the operating system's theme. The **`-moz-appearance`** and **`-webkit-appearance`** properties are non-standard versions of this property, used (respectively) by Gecko (Firefox) and by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing. Note that Firefox and Edge also support **`-webkit-appearance`**, for compatibility reasons.

*Syntax**: `none | auto | textfield | menulist-button | <compat-auto>`

*Initial value**: `none`

| Chrome  | Firefox |  Safari  |   Edge   | IE  |
| :-----: | :-----: | :------: | :------: | :-: |
| **84**  | **80**  | **15.4** |  **84**  | No  |
| 1 _-x-_ | 1 _-x-_ | 3 _-x-_  | 12 _-x-_ |     |
### aspectRatio
- type: AspectRatio
- description: The **`aspect-ratio`** CSS property sets a **preferred aspect ratio** for the box, which will be used in the calculation of auto sizes and some other layout functions.

*Syntax**: `auto | <ratio>`

*Initial value**: `auto`

| Chrome | Firefox | Safari | Edge | IE  |
| :----: | :-----: | :----: | :--: | :-: |
| **88** | **89**  | **15** | n/a  | No  |
### backdropFilter
- type: BackdropFilter
- description: The **`backdrop-filter`** CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything _behind_ the element, to see the effect you must make the element or its background at least partially transparent.

*Syntax**: `none | <filter-function-list>`

*Initial value**: `none`

| Chrome | Firefox |   Safari    |  Edge  | IE  |
| :----: | :-----: | :---------: | :----: | :-: |
| **76** | **103** | **9** _-x-_ | **17** | No  |
### backfaceVisibility
- type: BackfaceVisibility
- description: The **`backface-visibility`** CSS property sets whether the back face of an element is visible when turned towards the user.

*Syntax**: `visible | hidden`

*Initial value**: `visible`

|  Chrome  | Firefox  |  Safari   |  Edge  |   IE   |
| :------: | :------: | :-------: | :----: | :----: |
|  **36**  |  **16**  | **15.4**  | **12** | **10** |
| 12 _-x-_ | 10 _-x-_ | 5.1 _-x-_ |        |        |
### backgroundAttachment
- type: BackgroundAttachment
- description: The **`background-attachment`** CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.

*Syntax**: `<attachment>#`

*Initial value**: `scroll`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### backgroundBlendMode
- type: BackgroundBlendMode
- description: The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.

*Syntax**: `<blend-mode>#`

*Initial value**: `normal`

| Chrome | Firefox | Safari | Edge | IE  |
| :----: | :-----: | :----: | :--: | :-: |
| **35** | **30**  | **8**  | n/a  | No  |
### backgroundClip
- type: BackgroundClip
- description: The **`background-clip`** CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

*Syntax**: `<box>#`

*Initial value**: `border-box`

| Chrome | Firefox | Safari  |  Edge  |  IE   |
| :----: | :-----: | :-----: | :----: | :---: |
| **1**  |  **4**  | **14**  | **12** | **9** |
|        |         | 3 _-x-_ |        |       |
### backgroundImage
- type: BackgroundImage
- description: The **`background-image`** CSS property sets one or more background images on an element.

*Syntax**: `<bg-image>#`

*Initial value**: `none`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### backgroundOrigin
- type: BackgroundOrigin
- description: The **`background-origin`** CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

*Syntax**: `<box>#`

*Initial value**: `padding-box`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **4**  | **3**  | **12** | **9** |
### backgroundPositionX
- type: BackgroundPositionX<string | number>
- description: The **`background-position-x`** CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by `background-origin`.

*Syntax**: `[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#`

*Initial value**: `0%`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  | **49**  | **1**  | **12** | **6** |
### backgroundPositionY
- type: BackgroundPositionY<string | number>
- description: The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`.

*Syntax**: `[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#`

*Initial value**: `0%`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  | **49**  | **1**  | **12** | **6** |
### backgroundRepeat
- type: BackgroundRepeat
- description: The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

*Syntax**: `<repeat-style>#`

*Initial value**: `repeat`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### backgroundSize
- type: BackgroundSize<string | number>
- description: The **`background-size`** CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

*Syntax**: `<bg-size>#`

*Initial value**: `auto auto`

| Chrome  | Firefox | Safari  |  Edge  |  IE   |
| :-----: | :-----: | :-----: | :----: | :---: |
|  **3**  |  **4**  |  **5**  | **12** | **9** |
| 1 _-x-_ |         | 3 _-x-_ |        |       |
### blockOverflow
- type: BlockOverflow
- description: **Syntax**: `clip | ellipsis | <string>`

**Initial value**: `clip`
### blockSize
- type: BlockSize<string | number>
- description: The **`block-size`** CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the `width` or the `height` property, depending on the value of `writing-mode`.

*Syntax**: `<'width'>`

*Initial value**: `auto`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **57** | **41**  | **12.1** | n/a  | No  |
### borderBlockColor
- type: BorderBlockColor
- description: The **`border-block-color`** CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-color'>{1,2}`

*Initial value**: `currentcolor`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **87** | **66**  | **14.1** | n/a  | No  |
### borderBlockEndColor
- type: BorderBlockEndColor
- description: The **`border-block-end-color`** CSS property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-color'>`

*Initial value**: `currentcolor`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **69** | **41**  | **12.1** | n/a  | No  |
### borderBlockEndStyle
- type: BorderBlockEndStyle
- description: The **`border-block-end-style`** CSS property defines the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style`, `border-right-style`, `border-bottom-style`, or `border-left-style` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-style'>`

*Initial value**: `none`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **69** | **41**  | **12.1** | n/a  | No  |
### borderBlockEndWidth
- type: BorderBlockEndWidth<string | number>
- description: The **`border-block-end-width`** CSS property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-width'>`

*Initial value**: `medium`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **69** | **41**  | **12.1** | n/a  | No  |
### borderBlockStartColor
- type: BorderBlockStartColor
- description: The **`border-block-start-color`** CSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-color'>`

*Initial value**: `currentcolor`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **69** | **41**  | **12.1** | n/a  | No  |
### borderBlockStartStyle
- type: BorderBlockStartStyle
- description: The **`border-block-start-style`** CSS property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style`, `border-right-style`, `border-bottom-style`, or `border-left-style` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-style'>`

*Initial value**: `none`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **69** | **41**  | **12.1** | n/a  | No  |
### borderBlockStartWidth
- type: BorderBlockStartWidth<string | number>
- description: The **`border-block-start-width`** CSS property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-width'>`

*Initial value**: `medium`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **69** | **41**  | **12.1** | n/a  | No  |
### borderBlockStyle
- type: BorderBlockStyle
- description: The **`border-block-style`** CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-style'>`

*Initial value**: `none`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **87** | **66**  | **14.1** | n/a  | No  |
### borderBlockWidth
- type: BorderBlockWidth<string | number>
- description: The **`border-block-width`** CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-width'>`

*Initial value**: `medium`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **87** | **66**  | **14.1** | n/a  | No  |
### borderBottomLeftRadius
- type: BorderBottomLeftRadius<string | number>
- description: The **`border-bottom-left-radius`** CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

*Syntax**: `<length-percentage>{1,2}`

*Initial value**: `0`

| Chrome  | Firefox | Safari  |  Edge  |  IE   |
| :-----: | :-----: | :-----: | :----: | :---: |
|  **4**  |  **4**  |  **5**  | **12** | **9** |
| 1 _-x-_ |         | 3 _-x-_ |        |       |
### borderBottomRightRadius
- type: BorderBottomRightRadius<string | number>
- description: The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

*Syntax**: `<length-percentage>{1,2}`

*Initial value**: `0`

| Chrome  | Firefox | Safari  |  Edge  |  IE   |
| :-----: | :-----: | :-----: | :----: | :---: |
|  **4**  |  **4**  |  **5**  | **12** | **9** |
| 1 _-x-_ |         | 3 _-x-_ |        |       |
### borderBottomStyle
- type: BorderBottomStyle
- description: The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.

*Syntax**: `<line-style>`

*Initial value**: `none`

| Chrome | Firefox | Safari |  Edge  |   IE    |
| :----: | :-----: | :----: | :----: | :-----: |
| **1**  |  **1**  | **1**  | **12** | **5.5** |
### borderBottomWidth
- type: BorderBottomWidth<string | number>
- description: The **`border-bottom-width`** CSS property sets the width of the bottom border of an element.

*Syntax**: `<line-width>`

*Initial value**: `medium`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### borderCollapse
- type: BorderCollapse
- description: The **`border-collapse`** CSS property sets whether cells inside a `<table>` have shared or separate borders.

*Syntax**: `collapse | separate`

*Initial value**: `separate`

| Chrome | Firefox | Safari  |  Edge  |  IE   |
| :----: | :-----: | :-----: | :----: | :---: |
| **1**  |  **1**  | **1.2** | **12** | **5** |
### borderEndEndRadius
- type: BorderEndEndRadius<string | number>
- description: The **`border-end-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.

*Syntax**: `<length-percentage>{1,2}`

*Initial value**: `0`

| Chrome | Firefox | Safari | Edge | IE  |
| :----: | :-----: | :----: | :--: | :-: |
| **89** | **66**  | **15** | n/a  | No  |
### borderEndStartRadius
- type: BorderEndStartRadius<string | number>
- description: The **`border-end-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.

*Syntax**: `<length-percentage>{1,2}`

*Initial value**: `0`

| Chrome | Firefox | Safari | Edge | IE  |
| :----: | :-----: | :----: | :--: | :-: |
| **89** | **66**  | **15** | n/a  | No  |
### borderImageOutset
- type: BorderImageOutset<string | number>
- description: The **`border-image-outset`** CSS property sets the distance by which an element's border image is set out from its border box.

*Syntax**: `[ <length> | <number> ]{1,4}`

*Initial value**: `0`

| Chrome | Firefox | Safari |  Edge  |   IE   |
| :----: | :-----: | :----: | :----: | :----: |
| **15** | **15**  | **6**  | **12** | **11** |
### borderImageRepeat
- type: BorderImageRepeat
- description: The **`border-image-repeat`** CSS property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image.

*Syntax**: `[ stretch | repeat | round | space ]{1,2}`

*Initial value**: `stretch`

| Chrome | Firefox | Safari |  Edge  |   IE   |
| :----: | :-----: | :----: | :----: | :----: |
| **15** | **15**  | **6**  | **12** | **11** |
### borderImageSlice
- type: BorderImageSlice
- description: The **`border-image-slice`** CSS property divides the image specified by `border-image-source` into regions. These regions form the components of an element's border image.

*Syntax**: `<number-percentage>{1,4} && fill?`

*Initial value**: `100%`

| Chrome | Firefox | Safari |  Edge  |   IE   |
| :----: | :-----: | :----: | :----: | :----: |
| **15** | **15**  | **6**  | **12** | **11** |
### borderImageSource
- type: BorderImageSource
- description: The **`border-image-source`** CSS property sets the source image used to create an element's border image.

*Syntax**: `none | <image>`

*Initial value**: `none`

| Chrome | Firefox | Safari |  Edge  |   IE   |
| :----: | :-----: | :----: | :----: | :----: |
| **15** | **15**  | **6**  | **12** | **11** |
### borderImageWidth
- type: BorderImageWidth<string | number>
- description: The **`border-image-width`** CSS property sets the width of an element's border image.

*Syntax**: `[ <length-percentage> | <number> | auto ]{1,4}`

*Initial value**: `1`

| Chrome | Firefox | Safari |  Edge  |   IE   |
| :----: | :-----: | :----: | :----: | :----: |
| **15** | **13**  | **6**  | **12** | **11** |
### borderInlineColor
- type: BorderInlineColor
- description: The **`border-inline-color`** CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-color'>{1,2}`

*Initial value**: `currentcolor`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **87** | **66**  | **14.1** | n/a  | No  |
### borderInlineEndColor
- type: BorderInlineEndColor
- description: The **`border-inline-end-color`** CSS property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-color'>`

*Initial value**: `currentcolor`

| Chrome |           Firefox           |  Safari  | Edge | IE  |
| :----: | :-------------------------: | :------: | :--: | :-: |
| **69** |           **41**            | **12.1** | n/a  | No  |
|        | 3 _(-moz-border-end-color)_ |          |      |     |
### borderInlineEndStyle
- type: BorderInlineEndStyle
- description: The **`border-inline-end-style`** CSS property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style`, `border-right-style`, `border-bottom-style`, or `border-left-style` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-style'>`

*Initial value**: `none`

| Chrome |           Firefox           |  Safari  | Edge | IE  |
| :----: | :-------------------------: | :------: | :--: | :-: |
| **69** |           **41**            | **12.1** | n/a  | No  |
|        | 3 _(-moz-border-end-style)_ |          |      |     |
### borderInlineEndWidth
- type: BorderInlineEndWidth<string | number>
- description: The **`border-inline-end-width`** CSS property defines the width of the logical inline-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-width'>`

*Initial value**: `medium`

| Chrome |           Firefox           |  Safari  | Edge | IE  |
| :----: | :-------------------------: | :------: | :--: | :-: |
| **69** |           **41**            | **12.1** | n/a  | No  |
|        | 3 _(-moz-border-end-width)_ |          |      |     |
### borderInlineStartColor
- type: BorderInlineStartColor
- description: The **`border-inline-start-color`** CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-color'>`

*Initial value**: `currentcolor`

| Chrome |            Firefox            |  Safari  | Edge | IE  |
| :----: | :---------------------------: | :------: | :--: | :-: |
| **69** |            **41**             | **12.1** | n/a  | No  |
|        | 3 _(-moz-border-start-color)_ |          |      |     |
### borderInlineStartStyle
- type: BorderInlineStartStyle
- description: The **`border-inline-start-style`** CSS property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style`, `border-right-style`, `border-bottom-style`, or `border-left-style` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-style'>`

*Initial value**: `none`

| Chrome |            Firefox            |  Safari  | Edge | IE  |
| :----: | :---------------------------: | :------: | :--: | :-: |
| **69** |            **41**             | **12.1** | n/a  | No  |
|        | 3 _(-moz-border-start-style)_ |          |      |     |
### borderInlineStartWidth
- type: BorderInlineStartWidth<string | number>
- description: The **`border-inline-start-width`** CSS property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-width'>`

*Initial value**: `medium`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **69** | **41**  | **12.1** | n/a  | No  |
### borderInlineStyle
- type: BorderInlineStyle
- description: The **`border-inline-style`** CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-style'>`

*Initial value**: `none`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **87** | **66**  | **14.1** | n/a  | No  |
### borderInlineWidth
- type: BorderInlineWidth<string | number>
- description: The **`border-inline-width`** CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

*Syntax**: `<'border-top-width'>`

*Initial value**: `medium`

| Chrome | Firefox |  Safari  | Edge | IE  |
| :----: | :-----: | :------: | :--: | :-: |
| **87** | **66**  | **14.1** | n/a  | No  |
### borderLeftStyle
- type: BorderLeftStyle
- description: The **`border-left-style`** CSS property sets the line style of an element's left `border`.

*Syntax**: `<line-style>`

*Initial value**: `none`

| Chrome | Firefox | Safari |  Edge  |   IE    |
| :----: | :-----: | :----: | :----: | :-----: |
| **1**  |  **1**  | **1**  | **12** | **5.5** |
### borderLeftWidth
- type: BorderLeftWidth<string | number>
- description: The **`border-left-width`** CSS property sets the width of the left border of an element.

*Syntax**: `<line-width>`

*Initial value**: `medium`

| Chrome | Firefox | Safari |  Edge  |  IE   |
| :----: | :-----: | :----: | :----: | :---: |
| **1**  |  **1**  | **1**  | **12** | **4** |
### borderRightStyle
- type: BorderRightStyle
- description: The **`border-right-style`** CSS property sets the line style of an element's right `border`.

*Syntax**: `<line-style>`

*Initial value**: `none`

| Chrome | Firefox | Safari |  Edge  |   IE    |
| :----: | :-----: | :----: | :----: | :-----: |
| **1**  |  **1**  | **1**  | **12** | **5.5** |
### borderRightWidth
- type: BorderRightWidth<string | number>
- description: The **`border-right-width`** CSS property sets the width of the right border of an element.

*Syntax**: `<line-width>`

*Initial value**: `medium`

| Chrom