Interface StandardShorthandProperties<TLength, TTime>

The **all** shorthand CSS property resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.

Syntax: initial | inherit | unset | revert

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

See

https://developer.mozilla.org/docs/Web/CSS/all

The animation shorthand CSS property applies an animation 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.

Syntax: <single-animation>#

See

https://developer.mozilla.org/docs/Web/CSS/animation

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

Syntax: [ <bg-layer> , ]* <final-bg-layer>

See

https://developer.mozilla.org/docs/Web/CSS/background

The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.

Syntax: <bg-position>#

Initial value: 0% 0%

See

https://developer.mozilla.org/docs/Web/CSS/background-position

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>

See

https://developer.mozilla.org/docs/Web/CSS/border

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.

Syntax: <'border-top-width'> || <'border-top-style'> || <color>

See

https://developer.mozilla.org/docs/Web/CSS/border-block

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.

Syntax: <'border-top-width'> || <'border-top-style'> || <color>

See

https://developer.mozilla.org/docs/Web/CSS/border-block-end

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.

Syntax: <'border-top-width'> || <'border-top-style'> || <color>

See

https://developer.mozilla.org/docs/Web/CSS/border-block-start

The border-bottom shorthand CSS property sets an element's bottom border. It sets the values of border-bottom-width, border-bottom-style and border-bottom-color.

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

See

https://developer.mozilla.org/docs/Web/CSS/border-bottom

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

Syntax: <color>{1,4}

See

https://developer.mozilla.org/docs/Web/CSS/border-color

The border-image CSS property draws an image around a given element. It replaces the element's regular border.

Syntax: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

See

https://developer.mozilla.org/docs/Web/CSS/border-image

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.

Syntax: <'border-top-width'> || <'border-top-style'> || <color>

See

https://developer.mozilla.org/docs/Web/CSS/border-inline

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.

Syntax: <'border-top-width'> || <'border-top-style'> || <color>

See

https://developer.mozilla.org/docs/Web/CSS/border-inline-end

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.

Syntax: <'border-top-width'> || <'border-top-style'> || <color>

See

https://developer.mozilla.org/docs/Web/CSS/border-inline-start

The border-left shorthand CSS property sets all the properties of an element's left border.

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

See

https://developer.mozilla.org/docs/Web/CSS/border-left

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.

Syntax: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

See

https://developer.mozilla.org/docs/Web/CSS/border-radius

The border-right shorthand CSS property sets all the properties of an element's right border.

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

See

https://developer.mozilla.org/docs/Web/CSS/border-right

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

Syntax: <line-style>{1,4}

See

https://developer.mozilla.org/docs/Web/CSS/border-style

The border-top shorthand CSS property sets all the properties of an element's top border.

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

See

https://developer.mozilla.org/docs/Web/CSS/border-top

The border-width shorthand CSS property sets the width of an element's border.

Syntax: <line-width>{1,4}

See

https://developer.mozilla.org/docs/Web/CSS/border-width

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

Syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

See

https://developer.mozilla.org/docs/Web/CSS/column-rule

The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.

Syntax: <'column-width'> || <'column-count'>

See

https://developer.mozilla.org/docs/Web/CSS/columns

The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

Syntax: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

See

https://developer.mozilla.org/docs/Web/CSS/flex

The flex-flow CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.

Syntax: <'flex-direction'> || <'flex-wrap'>

See

https://developer.mozilla.org/docs/Web/CSS/flex-flow

The font CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.

Syntax: [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

See

https://developer.mozilla.org/docs/Web/CSS/font

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'>?

Supported in Flex Layout

Supported in Grid Layout

Supported in Multi-column Layout

See

https://developer.mozilla.org/docs/Web/CSS/gap

The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.

Syntax: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

See

https://developer.mozilla.org/docs/Web/CSS/grid

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

Syntax: <grid-line> [ / <grid-line> ]{0,3}

See

https://developer.mozilla.org/docs/Web/CSS/grid-area

The grid-column CSS shorthand property specifies a grid item's size and location within a 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.

Syntax: <grid-line> [ / <grid-line> ]?

See

https://developer.mozilla.org/docs/Web/CSS/grid-column

The grid-row CSS shorthand property specifies 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.

Syntax: <grid-line> [ / <grid-line> ]?

See

https://developer.mozilla.org/docs/Web/CSS/grid-row

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

Syntax: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

See

https://developer.mozilla.org/docs/Web/CSS/grid-template

Syntax: none | <integer>

Initial value: none

The list-style CSS shorthand property allows you set all the list style properties at once.

Syntax: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

See

https://developer.mozilla.org/docs/Web/CSS/list-style

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.

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

See

https://developer.mozilla.org/docs/Web/CSS/margin

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

Syntax: <mask-layer>#

See

https://developer.mozilla.org/docs/Web/CSS/mask

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

Syntax: <'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>

See

https://developer.mozilla.org/docs/Web/CSS/mask-border

The offset CSS shorthand property sets all the properties required for animating an element along a defined path.

Syntax: [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

See

https://developer.mozilla.org/docs/Web/CSS/offset

The offset CSS shorthand property sets all the properties required for animating an element along a defined path.

Syntax: [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

See

https://developer.mozilla.org/docs/Web/CSS/offset

The outline CSS shorthand property set all the outline properties in a single declaration.

Syntax: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

See

https://developer.mozilla.org/docs/Web/CSS/outline

The overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.

Syntax: [ visible | hidden | clip | scroll | auto ]{1,2}

Initial value: visible

See

https://developer.mozilla.org/docs/Web/CSS/overflow

The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y.

Syntax: [ contain | none | auto ]{1,2}

Initial value: auto

See

https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

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

See

https://developer.mozilla.org/docs/Web/CSS/padding

The CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.

Syntax: <'align-items'> <'justify-items'>?

See

https://developer.mozilla.org/docs/Web/CSS/place-items

The place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox. If the second value is not present, the first value is also used for it.

Syntax: <'align-self'> <'justify-self'>?

See

https://developer.mozilla.org/docs/Web/CSS/place-self

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

Syntax: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>

See

https://developer.mozilla.org/docs/Web/CSS/text-decoration

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.

Syntax: <'text-emphasis-style'> || <'text-emphasis-color'>

See

https://developer.mozilla.org/docs/Web/CSS/text-emphasis

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

Syntax: <single-transition>#

See

https://developer.mozilla.org/docs/Web/CSS/transition