Skip to main content
Go to Latest
interface StandardShorthandPropertiesHyphenFallback
import { type StandardShorthandPropertiesHyphenFallback } from "https://deno.land/std@0.40.0/types/react/csstype.d.ts";

Type Parameters

optional
TLength = string | 0

Properties

optional
all: Globals | Globals[]

The **all** CSS shorthand property sets all of an element's properties (other than unicode-bidi and direction) to their initial or inherited values, or to the values specified in another stylesheet origin.

Initial value: There is no practical initial value for it.

Chrome Firefox Safari Edge IE
37 27 9.1 No No
optional
animation: AnimationProperty | AnimationProperty[]

The animation shorthand CSS property sets an animated transition between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

Chrome Firefox Safari Edge IE
43 16 9 12 10
3 -x- 5 -x- 4 -x-

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

Chrome Firefox Safari Edge IE
1 1 1 12 4

The border CSS property sets an element's border. It's a shorthand for border-width, border-style, and border-color.

Chrome Firefox Safari Edge IE
1 1 1 12 4

The border-block CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.

Chrome Firefox Safari Edge IE
69 66 No No No

The border-block-end CSS property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.

Chrome Firefox Safari Edge IE
69 41 12.1 No No

The border-block-start CSS property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.

Chrome Firefox Safari Edge IE
69 41 12.1 No No

The border-bottom CSS property is a shorthand that sets the values of border-bottom-width, border-bottom-style and border-bottom-color. These properties set an element's bottom border.

Chrome Firefox Safari Edge IE
1 1 1 12 4
optional
border-color: BorderColorProperty | BorderColorProperty[]

The border-color shorthand CSS property sets the color of all sides of an element's border.

Chrome Firefox Safari Edge IE
1 1 1 12 4
optional
border-image: BorderImageProperty | BorderImageProperty[]

The border-image CSS property draws an image in place of an element's border-style.

Chrome Firefox Safari Edge IE
16 15 6 12 11
7 -x- 3.5 -x- 3 -x-

The border-inline CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.

Chrome Firefox Safari Edge IE
69 66 No No No

The border-inline-end CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.

Chrome Firefox Safari Edge IE
69 41 12.1 No No

The border-inline-start CSS property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.

Chrome Firefox Safari Edge IE
69 41 12.1 No No

The border-left CSS property is a shorthand that sets the values of border-left-width, border-left-style and border-left-color. These properties set an element's left border.

Chrome Firefox Safari Edge IE
1 1 1 12 4

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Chrome Firefox Safari Edge IE
4 4 5 12 9
1 -x- 3 -x-

The border-right CSS property is a shorthand that sets the values of border-right-width, border-right-style and border-right-color. These properties set an element's right border.

Chrome Firefox Safari Edge IE
1 1 1 12 5.5
optional
border-style: BorderStyleProperty | BorderStyleProperty[]

The border-style CSS property is a shorthand property that sets the line style for all four sides of an element's border.

Chrome Firefox Safari Edge IE
1 1 1 12 4

The border-top CSS property is a shorthand that sets the values of border-top-width, border-top-style and border-top-color. These properties set an element's top border.

Chrome Firefox Safari Edge IE
1 1 1 12 4

The border-width shorthand CSS property sets the widths of all four sides of an element's border.

Chrome Firefox Safari Edge IE
1 1 1 12 4

The column-rule CSS property sets the width, style, and color of the rule (line) drawn between columns in a multi-column layout.

Chrome Firefox Safari Edge IE
50 52 9 12 10
1 -x- 3.5 -x- 3 -x-

The columns CSS property sets the column width and column count of an element.

Chrome Firefox Safari Edge IE
50 52 9 12 10
9 -x- 3 -x-

The flex CSS property sets how a flex item will grow or shrink to fit the space available in its flex container. It is a shorthand for flex-grow, flex-shrink, and flex-basis.

Chrome Firefox Safari Edge IE
29 20 9 12 11
21 -x- 6.1 -x- 10 -x-
optional
flex-flow: FlexFlowProperty | FlexFlowProperty[]

The flex-flow CSS property is a shorthand property for flex-direction and flex-wrap properties.

Chrome Firefox Safari Edge IE
29 28 9 12 11
21 -x- 6.1 -x-
optional
font: FontProperty | FontProperty[]

The font CSS property is a shorthand for font-style, font-variant, font-weight, font-size, line-height, and font-family. Alternatively, it sets an element's font to a system font.

Chrome Firefox Safari Edge IE
1 1 1 12 3

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.


Supported in Flex Layout

Chrome Firefox Safari Edge IE
No 63 No No No

Supported in Grid Layout

Chrome Firefox Safari Edge IE
66 61 10.1 (grid-gap) 16 No
57 (grid-gap) 52 (grid-gap)

Supported in Multi-column Layout

Chrome Firefox Safari Edge IE
66 61 No 16 No

optional
grid: GridProperty | GridProperty[]

The grid CSS property is a shorthand property that sets all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), and all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration.

Chrome Firefox Safari Edge IE
57 52 10.1 16 No
optional
grid-area: GridAreaProperty | GridAreaProperty[]

The grid-area CSS property is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

Chrome Firefox Safari Edge IE
57 52 10.1 16 No
optional
grid-column: GridColumnProperty | GridColumnProperty[]

The grid-column CSS property is a shorthand property for grid-column-start and grid-column-end specifying a grid item's size and location within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

Chrome Firefox Safari Edge IE
57 52 10.1 16 No
optional
grid-row: GridRowProperty | GridRowProperty[]

The grid-row CSS property is a shorthand property for grid-row-start and grid-row-end specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

Chrome Firefox Safari Edge IE
57 52 10.1 16 No
optional
grid-template: GridTemplateProperty | GridTemplateProperty[]

The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.

Chrome Firefox Safari Edge IE
57 52 10.1 16 No
optional
line-clamp: LineClampProperty | LineClampProperty[]

Initial value: none

optional
list-style: ListStyleProperty | ListStyleProperty[]

The list-style CSS property is a shorthand to set list style properties list-style-type, list-style-image, and list-style-position.

Chrome Firefox Safari Edge IE
1 1 1 12 4

The margin CSS property sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.

Chrome Firefox Safari Edge IE
1 1 1 12 3

The mask CSS property hides an element (partially or fully) by masking or clipping the image at specific points.

Chrome Firefox Safari Edge IE
1 2 3.2 12 No
optional
mask-border: MaskBorderProperty | MaskBorderProperty[]

The mask-border CSS property lets you create a mask along the edge of an element's border.

The offset CSS property is a shorthand property for animating an element along a defined path.

Chrome Firefox Safari Edge IE
55 n/a No No No
46 (motion)

The offset CSS property is a shorthand property for animating an element along a defined path.

Chrome Firefox Safari Edge IE
55 n/a No No No
46 (motion)

The outline CSS property is a shorthand to set various outline properties in a single declaration: outline-style, outline-width, and outline-color.

Chrome Firefox Safari Edge IE
1 1.5 1.2 12 8

The padding CSS property sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.

Chrome Firefox Safari Edge IE
1 1 1 12 4
optional
place-items: PlaceItemsProperty | PlaceItemsProperty[]

The CSS place-items shorthand property sets the align-items and justify-items properties, respectively. If the second value is not set, the first value is also used for it.


Supported in Flex Layout

Chrome Firefox Safari Edge IE
59 45 11 No No

Supported in Grid Layout

Chrome Firefox Safari Edge IE
59 45 11 No No

optional
place-self: PlaceSelfProperty | PlaceSelfProperty[]

The place-self CSS property is a shorthand property sets both the align-self and justify-self properties. The first value is the align-self property value, the second the justify-self one. If the second value is not present, the first value is also used for it.


Supported in Flex Layout

Chrome Firefox Safari Edge IE
59 45 No No No

Supported in Grid Layout

Chrome Firefox Safari Edge IE
59 45 No No No

The text-decoration CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.

Chrome Firefox Safari Edge IE
1 1 1 12 3
optional
text-emphasis: TextEmphasisProperty | TextEmphasisProperty[]

The text-emphasis CSS property applies emphasis marks to text (except spaces and control characters). It is a shorthand for text-emphasis-style and text-emphasis-color.

Chrome Firefox Safari Edge IE
25 46 6.1 No No
optional
transition: TransitionProperty | TransitionProperty[]

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

Chrome Firefox Safari Edge IE
26 16 9 12 10
1 -x- 4 -x- 3.1 -x-