CSS3 Properties

On this page, you can find all the CSS3 property groups with references and short descriptions.

List of CSS3 Properties¶

Animation Properties¶

Property	Description of
animation	Animates (gradually changes from one style to another) CSS properties with discrete values.
animation-delay	Specifies when an animation will start.
animation-direction	Sets how animation should be played: forwards, backward or in alternate cycles.
animation-duration	Defines the length of time (in seconds or milliseconds) that animation takes to complete one cycle of an animation.
animation-fill-mode	Sets a style to the element when the animation is not executing (before it starts after it ends, or both).
animation-iteration-count	Defines how many times the animation should be played.
animation-name	Defines the name of the @keyframes rule you want to apply. It has two values: none and keyframe name.
animation-play-state	Specifies if the animation is running or it is paused.
animation-timing-function	Defines how the animation will progress over the duration of each cycle, not throughout the whole of the animation.
@keyframes	The @keyframes at-rule is the basis for keyframe animations used to animate (gradually change from one style to another) many CSS properties.

Background Properties¶

Property	Description
background-clip	Specifies how far the background-color and background-image should be from the element.
background-origin	Specifies the background positioning area of a background-image.
background-size	Defines the size of the background image.

Border Properties¶

Property	Description
border-bottom-left-radius	Defines the round shape of the bottom left corner of the element.
border-bottom-right-radius	Sets the rounding of the bottom-right corner of the element.
border-image	Allows specifying an image as the border around an element.
border-image-outset	Specifies the amount by which the border image is extended beyond the element’s border-box.
border-image-repeat	Specifies if the border-image will be rounded, repeated, or stretched.
border-image-slice	Specifies how to slice the image specified by border-image-source into nine regions: four corners, four edges, the middle part.
border-image-source	Sets the source image for creating an element's border-image.
border-image-width	Defines the width of the border-image.
border-radius	Makes rounded corners for the outer border edge of an element.
border-top-left-radius	Defines the rounding of the top left corner of the element. There are three kinds of rounding.
border-top-right-radius	Defines the round shape of the top right corner of the element. There are three kinds of rounding.

Color Properties¶

Property	Description
opacity	Specifies the transparency of an element.

Flexible Box Layout¶

Property	Description
align-content	Aligns a flex container's lines, when there is available space vertically (on the cross-axis).
align-items	Defines the default alignment for flex items. It is the same as the justify-content property but the vertical version.
flex	Specifies the components of a flexible length.
flex-basis	Defines the initial main size of the flexible item.
flex-direction	Defines the main axis of a flex container and sets the order in which flex items appear.
flex-flow	A shorthand property for the flex-wrap and flex-direction properties.
flex-grow	Specifies how much the item will grow relative to the rest of the items of the flex container.
flex-shrink	Specifies how much the item will shrink relative to the rest of the items of the flex container.
flex-wrap	Specifies if the flexible items should wrap or not.
justify-content	Aligns the items when the items do not use all available space horizontally.
order	Specifies the order of a flexible item inside the flex or grid container.

Font Properties¶

Property	Description
font-size-adjust	Controls the font size when the first selected font is unavailable.
font-stretch	Makes the text narrower or wider.

Multi-column Layout Properties¶

Property	Description
column-count	Specifies the number of columns which divide the content of an element.
column-fill	Controls the element’s content when it is divided into columns.
column-gap	Sets the length of the gap between columns.
column-rule	Defines the style, the width, and the color of the rule between columns.
column-rule-color	Sets the color of the rule.
column-rule-style	Defines the rule's style between columns.
column-rule-width	Defines the width of the rule between columns.
column-span	Specifies whether the element spans across one column or all columns.
column-width	Defines the width of columns.
columns	A shorthand property for column-count and column-width.

Outline Properties¶

Property	Description
outline-offset	Specifies the space between an outline and the border edge of an element.

Text Properties¶

Property	Description
tab-size	Sets the width of a tab character.
text-align-last	Sets the alignment of the last line of the text.
text-decoration-color	Sets the color of the text-decoration.
text-decoration-line	Specifies the kind of line which will be used for text decoration.
text-decoration-style	Specifies the style of the text-decoration.
text-justify	Defines the behavior of spacing between words or characters.
text-overflow	Specifies how the overflowing inline text should be signaled to the user.
text-shadow	Allows adding shadows to the text.
column-width	Defines the width of columns.
word-break	Specifies where the lines should be broken.
word-wrap	Allows breaking lines into words so as to fit in its container.

Transform Properties¶

Property	Description
backface-visibility	Specifies whether the back face of an element should be visible or not.
perspective	Gives a 3D-positioned element some perspective and determines the distance between the z=0 plane.
perspective-origin	Defines the position at which the user is looking at the 3D-positioned element.
transform	Specifies two-dimensional or three-dimensional transformation of the element.
transform-origin	Allows changing the position of the elements’ transformation.
transform-style	Specifies how the children elements are rendered in three dimensional (3D) space.

Transitions Properties¶

Property	Description
transition	A shorthand property for the following properties: transition-property, transition-duration, transition-timing-function, transition-delay
transition-delay	Specifies when the transition effect should start.
transition-duration	Specifies how long the transition animation should take.
transition-property	Specifies the names of the properties for the transition.
transition-timing-function	Specifies transition proceeding over its duration allowing to change the speed.

Visual formatting Properties¶

Property	Description
overflow-x	Specifies whether the content should be hidden, visible, or scrolls horizontally when the content overflows the element’s left and right edges.
overflow-y	Specifies whether the content should be hidden, visible, or scrolls vertically when the content overflows the element’s top and bottom edges.
resize	Specifies how the element is resizable.
box-shadow	Allows to implement multiple shadows around the box specifying values for color, size, blur, offset and inset.
box-sizing	Defines the calculation of the width and height of an element, if they include padding and borders.