StandardShorthandProperties
Properties
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
.
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.
The background
shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
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
.
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.
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.
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.
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
.
The border-color
shorthand CSS property sets the color of an element's border.
The border-image
CSS property draws an image around a given element. It replaces the element's regular border.
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.
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.
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.
The border-left
shorthand CSS property sets all the properties of an element's left border.
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.
The border-right
shorthand CSS property sets all the properties of an element's right border.
The border-style
shorthand CSS property sets the line style for all four sides of an element's border.
The border-width
shorthand CSS property sets the width of an element's border.
The column-rule
shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.
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.
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.
The grid-template
CSS property is a shorthand property for defining grid columns, grid rows, and grid areas.
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
.
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
.
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.
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.
The mask-border
CSS shorthand property lets you create a mask along the edge of an element's border.
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
.
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.
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.
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.
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.
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.
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.
The scroll-margin-block
shorthand property sets the scroll margins of an element in the block dimension.
The scroll-margin-inline
shorthand property sets the scroll margins of an element in the inline dimension.
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.
The scroll-padding-block
shorthand property sets the scroll padding of an element in the block dimension.
The scroll-padding-inline
shorthand property sets the scroll padding of an element in the inline dimension.
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.
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.
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.
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
.
The transition
CSS property is a shorthand property for transition-property
, transition-duration
, transition-timing-function
, and transition-delay
.
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.