csstype
Version:
Strict TypeScript and Flow types for style based on MDN data
1,078 lines (1,075 loc) • 903 kB
TypeScript
export {};
export type PropertyValue<TValue> = TValue extends Array<infer AValue>
? Array<AValue extends infer TUnpacked & {} ? TUnpacked : AValue>
: TValue extends infer TUnpacked & {}
? TUnpacked
: TValue;
export type Fallback<T> = { [P in keyof T]: T[P] | readonly NonNullable<T[P]>[] };
export interface StandardLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/accent-color
*/
accentColor?: Property.AccentColor | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/align-content
*/
alignContent?: Property.AlignContent | undefined;
/**
* The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
*
* **Syntax**: `normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]`
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :------: | :-----: | :-----: | :----: | :----: |
* | **29** | **20** | **9** | **12** | **11** |
* | 21 _-x-_ | | 7 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/align-items
*/
alignItems?: Property.AlignItems | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/align-self
*/
alignSelf?: Property.AlignSelf | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/align-tracks
*/
alignTracks?: Property.AlignTracks | undefined;
/**
* 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 |
* | :-----: | :-----: | :----: | :--: | :-: |
* | **112** | **115** | **16** | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-composition
*/
animationComposition?: Property.AnimationComposition | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-delay
*/
animationDelay?: Property.AnimationDelay<TTime> | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-direction
*/
animationDirection?: Property.AnimationDirection | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-duration
*/
animationDuration?: Property.AnimationDuration<TTime> | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-fill-mode
*/
animationFillMode?: Property.AnimationFillMode | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-iteration-count
*/
animationIterationCount?: Property.AnimationIterationCount | undefined;
/**
* The **`animation-name`** CSS property specifies the names of one or more `@keyframes` at-rules that describe the animation to apply to an element. Multiple `@keyframe` at-rules are specified as a comma-separated list of names. If the specified name does not match any `@keyframe` at-rule, no properties are animated.
*
* **Syntax**: `[ none | <keyframes-name> ]#`
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :----: |
* | **43** | **16** | **9** | **12** | **10** |
* | 3 _-x-_ | 5 _-x-_ | 4 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-name
*/
animationName?: Property.AnimationName | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-play-state
*/
animationPlayState?: Property.AnimationPlayState | undefined;
/**
* The **`animation-range-end`** CSS property is used to set the end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will end.
*
* **Syntax**: `[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#`
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :----: | :--: | :-: |
* | **115** | No | No | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-range-end
*/
animationRangeEnd?: Property.AnimationRangeEnd<TLength> | undefined;
/**
* The **`animation-range-start`** CSS property is used to set the start of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start.
*
* **Syntax**: `[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#`
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :----: | :--: | :-: |
* | **115** | No | No | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-range-start
*/
animationRangeStart?: Property.AnimationRangeStart<TLength> | undefined;
/**
* The **`animation-timeline`** CSS property specifies the timeline that is used to control the progress of an animation.
*
* **Syntax**: `<single-animation-timeline>#`
*
* **Initial value**: `auto`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :----: | :--: | :-: |
* | **115** | n/a | No | n/a | No |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-timeline
*/
animationTimeline?: Property.AnimationTimeline | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/animation-timing-function
*/
animationTimingFunction?: Property.AnimationTimingFunction | undefined;
/**
* The **`appearance`** CSS property is used to control native appearance of UI controls, that are based on operating system's theme.
*
* **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-_ | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/appearance
*/
appearance?: Property.Appearance | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/aspect-ratio
*/
aspectRatio?: Property.AspectRatio | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/backdrop-filter
*/
backdropFilter?: Property.BackdropFilter | undefined;
/**
* 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-_ | | 5.1 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/backface-visibility
*/
backfaceVisibility?: Property.BackfaceVisibility | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-attachment
*/
backgroundAttachment?: Property.BackgroundAttachment | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-blend-mode
*/
backgroundBlendMode?: Property.BackgroundBlendMode | undefined;
/**
* 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** | **5** | **12** | **9** |
* | | | 3 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-clip
*/
backgroundClip?: Property.BackgroundClip | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-color
*/
backgroundColor?: Property.BackgroundColor | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-image
*/
backgroundImage?: Property.BackgroundImage | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-origin
*/
backgroundOrigin?: Property.BackgroundOrigin | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-position-x
*/
backgroundPositionX?: Property.BackgroundPositionX<TLength> | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-position-y
*/
backgroundPositionY?: Property.BackgroundPositionY<TLength> | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-repeat
*/
backgroundRepeat?: Property.BackgroundRepeat | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-size
*/
backgroundSize?: Property.BackgroundSize<TLength> | undefined;
/**
* **Syntax**: `clip | ellipsis | <string>`
*
* **Initial value**: `clip`
*/
blockOverflow?: Property.BlockOverflow | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/block-size
*/
blockSize?: Property.BlockSize<TLength> | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-color
*/
borderBlockColor?: Property.BorderBlockColor | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-end-color
*/
borderBlockEndColor?: Property.BorderBlockEndColor | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-end-style
*/
borderBlockEndStyle?: Property.BorderBlockEndStyle | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-end-width
*/
borderBlockEndWidth?: Property.BorderBlockEndWidth<TLength> | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-start-color
*/
borderBlockStartColor?: Property.BorderBlockStartColor | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-start-style
*/
borderBlockStartStyle?: Property.BorderBlockStartStyle | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-start-width
*/
borderBlockStartWidth?: Property.BorderBlockStartWidth<TLength> | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-style
*/
borderBlockStyle?: Property.BorderBlockStyle | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-block-width
*/
borderBlockWidth?: Property.BorderBlockWidth<TLength> | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-color
*/
borderBottomColor?: Property.BorderBottomColor | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius
*/
borderBottomLeftRadius?: Property.BorderBottomLeftRadius<TLength> | undefined;
/**
* 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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius
*/
borderBottomRightRadius?: Property.BorderBottomRightRadius<TLength> | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-style
*/
borderBottomStyle?: Property.BorderBottomStyle | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-width
*/
borderBottomWidth?: Property.BorderBottomWidth<TLength> | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-collapse
*/
borderCollapse?: Property.BorderCollapse | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius
*/
borderEndEndRadius?: Property.BorderEndEndRadius<TLength> | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius
*/
borderEndStartRadius?: Property.BorderEndStartRadius<TLength> | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-image-outset
*/
borderImageOutset?: Property.BorderImageOutset<TLength> | undefined;
/**
* The **`border-image-repeat`** CSS property defines how the edge regions and middle region of a source image are adjusted to fit the dimensions of an element's border image. The middle region can be displayed by using the keyword "fill" in the border-image-slice property.
*
* **Syntax**: `[ stretch | repeat | round | space ]{1,2}`
*
* **Initial value**: `stretch`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :----: |
* | **15** | **15** | **6** | **12** | **11** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-image-repeat
*/
borderImageRepeat?: Property.BorderImageRepeat | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-image-slice
*/
borderImageSlice?: Property.BorderImageSlice | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-image-source
*/
borderImageSource?: Property.BorderImageSource | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-image-width
*/
borderImageWidth?: Property.BorderImageWidth<TLength> | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-inline-color
*/
borderInlineColor?: Property.BorderInlineColor | undefined;
/**
* 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)_ | | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end-color
*/
borderInlineEndColor?: Property.BorderInlineEndColor | undefined;
/**
* 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)_ | | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end-style
*/
borderInlineEndStyle?: Property.BorderInlineEndStyle | undefined;
/**
* 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)_ | | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end-width
*/
borderInlineEndWidth?: Property.BorderInlineEndWidth<TLength> | undefined;
/**
* 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)_ | | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-color
*/
borderInlineStartColor?: Property.BorderInlineStartColor | undefined;
/**
* 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)_ | | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-style
*/
borderInlineStartStyle?: Property.BorderInlineStartStyle | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width
*/
borderInlineStartWidth?: Property.BorderInlineStartWidth<TLength> | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-inline-style
*/
borderInlineStyle?: Property.BorderInlineStyle | undefined;
/**
* 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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-inline-width
*/
borderInlineWidth?: Property.BorderInlineWidth<TLength> | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-left-color
*/
borderLeftColor?: Property.BorderLeftColor | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-left-style
*/
borderLeftStyle?: Property.BorderLeftStyle | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-left-width
*/
borderLeftWidth?: Property.BorderLeftWidth<TLength> | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-right-color
*/
borderRightColor?: Property.BorderRightColor | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-right-style
*/
borderRightStyle?: Property.BorderRightStyle | undefined;
/**
* The **`border-right-width`** CSS property sets the width of the right border of an element.
*
* **Syntax**: `<line-width>`
*
* **Initial value**: `medium`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-right-width
*/
borderRightWidth?: Property.BorderRightWidth<TLength> | undefined;
/**
* The **`border-spacing`** CSS property sets the distance between the borders of adjacent cells in a `<table>`. This property applies only when `border-collapse` is `separate`.
*
* **Syntax**: `<length> <length>?`
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **8** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-spacing
*/
borderSpacing?: Property.BorderSpacing<TLength> | undefined;
/**
* The **`border-start-end-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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius
*/
borderStartEndRadius?: Property.BorderStartEndRadius<TLength> | undefined;
/**
* The **`border-start-start-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 |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius
*/
borderStartStartRadius?: Property.BorderStartStartRadius<TLength> | undefined;
/**
* 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** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-top-color
*/
borderTopColor?: Property.BorderTopColor | undefined;
/**
* The **`border-top-left-radius`** CSS property rounds the top-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-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius
*/
borderTopLeftRadius?: Property.BorderTopLeftRadius<TLength> | undefined;
/**
* The **`border-top-right-radius`** CSS property rounds the top-right corner of an element by s