CSS 3 Properties

accent-color

Specifies an accent color for user-interface controls

align-content

Specifies the alignment between the lines inside a flexible container when the items do not use all the available space

align-items

Specifies the alignment of items within a flexible container along the cross axis

align-self

Specifies the alignment of a single item within a flexible container along the cross axis, overriding the align-items property.

all

Resets all properties (except unicode-bidi and direction)

animation

A shorthand property for all the animation-* properties

animation-delay

Specifies the length of time to wait before the animation starts

animation-direction

Specifies whether an animation should be played forward, backward or in alternate cycles

animation-duration

Specifies the total time an animation takes to complete one cycle from start to finish.

animation-fill-mode

Specifies how a CSS animation should apply styles to its target before and after its execution.

animation-iteration-count

Specifies the number of times an animation cycle should be played.

animation-name

Defines the name of the keyframes to use for the animation, allowing the animator to apply specific animation effects to an element.

animation-play-state

Specifies whether an animation is running or paused

animation-timing-function

Specifies the speed curve of an animation

aspect-ratio

Defines the proportional relationship between the width and height of an element, ensuring it maintains the desired shape during resizing.

backdrop-filter

Applies graphical effects like blurring or color shifting to the area behind an element.

backface-visibility

Determines whether the back side of an element is visible when facing the viewer, commonly used in 3D transformations.

background

A shorthand property for all the background-* properties

background-attachment

Specifies whether the background image is fixed with regard to the viewport or scrolls with the content

background-blend-mode

Specifies how background images and colors blend together.

background-clip

Defines the area where the background is painted

background-color

Specifies the color of the background in an element

background-image

Specifies an image to use as the background of an element.

background-origin

Defines the positioning area of the background image.

background-position

Specifies the position of a background image

background-position-x

Specifies the position of a background image on the x-axis

background-position-y

Specifies the position of a background image on y-axis

background-repeat

Sets if/how a background image will be repeated

background-size

Specifies the size of the background images

block-size

Specifies the size of an element in block direction

border

A shorthand property for border-width, border-style and border-color

border-block

A shorthand property for border-block-width, border-block-style and border-block-color

border-block-color

Sets the color of the borders at start and end in the block direction

border-block-end

A shorthand property for border-block-end-width, border-block-end-style and border-block-end-color

border-block-end-color

Sets the color of the border at the end in the block direction

border-block-end-style

Sets the style of the border at the end in the block direction

border-block-end-width

Sets the width of the border at the end in the block direction

border-block-start

A shorthand property for border-block-start-width, border-block-start-style and border-block-start-color

border-block-start-color

Sets the color of the border at the start in the block direction

border-block-start-style

Sets the style of the border at the start in the block direction

border-block-start-width

Sets the width of the border at the start in the block direction

border-block-style

Sets the style of the borders at start and end in the block direction

border-block-width

Sets the width of the borders at start and end in the block direction

border-bottom

A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color

border-bottom-color

Sets the color of the bottom border

border-bottom-left-radius

Defines the radius of the border of the bottom-left corner

border-bottom-right-radius

Defines the radius of the border of the bottom-right corner

border-bottom-style

Sets the style of the bottom border

border-bottom-width

Sets the width of the bottom border

border-collapse

Sets whether table borders should collapse into a single border or be separated

border-color

Sets the color of the four borders

border-end-end-radius

Sets the radius of the corner between the block-end and the inline-end sides of the element

border-end-start-radius

Sets the radius of the corner between the block-end and the inline-start sides of the element

border-image

A shorthand property for all the border-image-* properties

border-image-outset

Specifies the amount by which the border image area extends beyond the border box

border-image-repeat

Specifies whether the border image should be repeated, rounded or stretched

border-image-slice

Specifies how to slice the border image

border-image-source

Specifies the path to the image to be used as a border

border-image-width

Specifies the width of the border image

border-inline

A shorthand property for border-inline-width, border-inline-style and border-inline-color

border-inline-color

Sets the color of the borders at start and end in the inline direction

border-inline-end

A shorthand property for border-inline-end-width, border-inline-end-style and border-inline-end-color

border-inline-end-color

Sets the color of the border at the end in the inline direction

border-inline-end-style

Sets the style of the border at the end in the inline direction

border-inline-end-width

Sets the width of the border at the end in the inline direction

border-inline-start

A shorthand property for border-inline-start-width, border-inline-start-style and border-inline-start-color

border-inline-start-color

Sets the color of the border at the start in the inline direction

border-inline-start-style

Sets the style of the border at the start in the inline direction

border-inline-start-width

Sets the width of the border at the start in the inline direction

border-inline-style

Sets the style of the borders at start and end in the inline direction

border-inline-width

Sets the width of the borders at start and end in the inline direction

border-left

A shorthand property for all the border-left-* properties

border-left-color

Sets the color of the left border

border-left-style

Sets the style of the left border

border-left-width

Sets the width of the left border

border-radius

A shorthand property for the four border-*-radius properties

border-right

A shorthand property for all the border-right-* properties

border-right-color

Sets the color of the right border

border-right-style

Sets the style of the right border

border-right-width

Sets the width of the right border

border-spacing

Sets the distance between the borders of adjacent cells

border-start-end-radius

Sets the radius of the corner between the block-start and the inline-end sides of the element

border-start-start-radius

Sets the radius of the corner between the block-start and the inline-start sides of the element

border-style

Sets the style of the four borders

border-top

A shorthand property for border-top-width, border-top-style and border-top-color

border-top-color

Sets the color of the top border

border-top-left-radius

Defines the radius of the border of the top-left corner

border-top-right-radius

Defines the radius of the border of the top-right corner

border-top-style

Sets the style of the top border

border-top-width

Sets the width of the top border

border-width

Sets the width of the four borders

bottom

Sets the elements position, from the bottom of its parent element

box-decoration-break

Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break.

box-reflect

The box-reflect property is used to create a reflection of an element.

box-shadow

Attaches one or more shadows to an element

box-sizing

Defines how the width and height of an element are calculated: should they include padding and borders, or not

break-after

Specifies whether or not a page-, column-, or region-break should occur after the specified element

break-before

Specifies whether or not a page-, column-, or region-break should occur before the specified element

break-inside

Specifies whether or not a page-, column-, or region-break should occur inside the specified element