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
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, backwards or in alternate cycles.
animation-duration Defines the length of time (in seconds or milliseconds) that an animation takes to complete one cycle of 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 keyframename.
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 to specify 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, a 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 divides 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 to add 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 to change 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 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.

Practice Your Knowledge

Which of the following are valid CSS3 properties?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?