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 cascade layer or stylesheet origin.

Syntax: initial | inherit | unset | revert | revert-layer

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 animation-range CSS shorthand property is used to set the start and end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start and end.

Syntax: [ <'animation-range-start'> <'animation-range-end'>? ]#

See

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

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

Syntax: <'caret-color'> || <'caret-shape'>

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 contain-intrinsic-size CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.

Syntax: [ auto? [ none | <length> ] ]{1,2}

See

https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size

The container shorthand CSS property establishes the element as a query container and specifies the name or name for the containment context used in a container query.

Syntax: <'container-name'> [ / <'container-type'> ]?

See

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

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

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 a 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, grid rows, and grid 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

The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.

Syntax: <'top'>{1,4}

See

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

The inset-block CSS property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation.

Syntax: <'top'>{1,2}

See

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

The inset-inline CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation.

Syntax: <'top'>{1,2}

See

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

Syntax: none | <integer>

Initial value: none

The list-style CSS shorthand property allows you to 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 shorthand property sets the margin area on all four sides of an element.

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

See

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

The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

Syntax: <'margin-left'>{1,2}

See

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

The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

Syntax: <'margin-left'>{1,2}

See

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

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 sets most of 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 padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.

Syntax: <'padding-left'>{1,2}

See

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

The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.

Syntax: <'padding-left'>{1,2}

See

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

The place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.

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

See

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

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 scroll-margin shorthand property sets all of the scroll margins of an element at once, assigning values much like the margin property does for margins of an element.

Syntax: <length>{1,4}

See

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

The scroll-margin-block shorthand property sets the scroll margins of an element in the block dimension.

Syntax: <length>{1,2}

See

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

The scroll-margin-inline shorthand property sets the scroll margins of an element in the inline dimension.

Syntax: <length>{1,2}

See

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

The scroll-padding shorthand property sets scroll padding on all sides of an element at once, much like the padding property does for padding on an element.

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

See

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

The scroll-padding-block shorthand property sets the scroll padding of an element in the block dimension.

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

See

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

The scroll-padding-inline shorthand property sets the scroll padding of an element in the inline dimension.

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

See

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

The scroll-margin shorthand property sets all of the scroll margins of an element at once, assigning values much like the margin property does for margins of an element.

Syntax: <length>{1,4}

See

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

The scroll-timeline CSS shorthand property defines a name that can be used to identify the source element of a scroll timeline, along with the scrollbar axis that should provide the timeline.

Syntax: [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#

See

https://developer.mozilla.org/docs/Web/CSS/scroll-timeline

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

The view-timeline CSS shorthand property is used to define a named view progress timeline, which is progressed through based on the change in visibility of an element (known as the subject) inside a scrollable element (scroller). view-timeline is set on the subject.

Syntax: [ <'view-timeline-name'> <'view-timeline-axis'>? ]#

See

https://developer.mozilla.org/docs/Web/CSS/view-timeline