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?
Correct!
Incorrect!
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.