CSS Properties Complete Reference



CSS properties are individual attributes for the web design to define the style and appearance of HTML elements.

This CSS reference provides the complete guide to all CSS properties with examples. You can practice the example by clicking on the "Try It" button.

Search CSS Properties

All CSS Propetries

Following is the list of all CSS properties arranged alphabetically.

A

PropertyDescriptionExample
accent-colorSets a highlight color for controls on user interfaces.
align-contentSpecifies how the flex lines are distributed inside a flex container along it's cross-axis or grid's block-axis.
align-itemsDescribes how objects inside a flexible container should be aligned.
align-selfDefines how selected objects inside a flexible container should be aligned.
allResets all the properties except unicode-bidi and direction.
animationApplies animation between styles. Shorthand for all the animation properties.
animation-delayDefines a pause before an animation begins.
animation-directionSpecifies whether an animation should play in reverse, forward, or alternating cycles.
animation-durationIndicates the amount of time an animation should take to finish one cycle.
animation-fill-modeDefines the styles to be applied on the target element before and after the animation.
animation-iteration-countDefines how many times an animation should be played.
animation-nameGives the @keyframes animation a name.
animation-play-stateSpecifies whether an animation is running or paused.
animation-timing-functionGives an animation's speed curve specifications.
aspect-ratioDefines an element's desired aspect ratio.

B

PropertyDescriptionExample
backdrop-filterDefines a visual impact on the space behind an element.
backface-visibilitySpecifies whether an element's back face should be revealed when facing the user.
backgroundShorthand for background related properties.
background-attachmentSpecifies the position of the background relative to the viewport, either fixed or scrollable.
background-clipControls how far a background image extends beyond the element's padding or content box.
background-colorSets the background color of an element.
background-imageSets one or more background image(s) on an element.
background-originSets the origin of the background.
background-positionSets the initial position of each image in a background.
background-position-xSets the initial horizontal position of each image in a background.
background-position-ySets the initial vertical position of each image in a background.
background-repeatControls the repetition of an image in the background.
background-sizeControls the size of the background image.
background-blend-modeDetermines how an element's background images blend with each other.
borderSets the border of an element.
border-blockShorthand for setting the logical block border property values.
border-block-colorDefines the color of the borders in the block direction (top and bottom).
border-block-endShorthand property for setting the logical block end border properties.
border-block-end-colorDefines the color of the logical block-end border of an element.
border-block-end-styleDefines the style of the logical block-end border of an element.
border-block-end-widthDefines the width of the logical block-end border of an element.
border-block-startShorthand property for setting the logical block-start border properties.
border-block-start-colorDefines the color of the logical block-start border of an element.
border-block-start-styleDefines the style of the logical block start border of an element.
border-block-start-widthDefines the width of the logical block-start border of an element.
border-block-styleDefines the style of the top and bottom block borders of an element.
border-block-widthDefines the width of the top and bottom block borders of an element.
border-bottomShorthand property sets the element's bottom border.
border-bottom-colorSets the color of an element's bottom border.
border-bottom-left-radiusRounds the bottom-left corner of an element.
border-bottom-right-radiusRounds the bottom-right corner of an element.
border-bottom-styleSets the style of the bottom border.
border-bottom-widthSets the width of the bottom border.
border-collapseSpecifies whether the borders of a table should be divided or collapsed into a single border.
border-colorSets the color of the border(s).
border-end-end-radiusDefines a bottom-right border radius on an element.
border-end-start-radiusDefines a bottom-left border radius on an element.
border-imageSets an image as border to an element.
border-image-outsetDefines how much of the border image area goes outside of the border box.
border-image-repeatSpecifies whether the border image should be stretched, rounded, or repeated.
border-image-sliceDivides the border image into regions.
border-image-sourceDefines the path to the image that will be used as the border.
border-image-widthSets the width of the border image.
border-inlineShorthand property for setting the individual logical inline border property values.
border-inline-colorDefines the color of the logical inline borders of an element.
border-inline-endShorthand property for setting the logical inline-end border property values.
border-inline-end-colorSets the color of the logical inline-end border. (right border)
border-inline-end-styleSets the style of the logical inline-end border. (right border)
border-inline-end-widthSets the width of the logical inline-end border. (right border)
border-inline-startShorthand property for setting the logical inline-start border (left border) property values.
border-inline-start-colorSets the color of the inline-start border (left border).
border-inline-start-styleSets the style of the logical inline-start border (left border).
border-inline-start-widthSets the width of the logical inline-start border (left border).
border-inline-styleDefines the style of the left and right inline borders of an element.
border-inline-widthDefines the width of the left and right inline borders of an element.
border-leftShorthand for setting all the properties of the left border of an element.
border-left-colorDefines the color of the left border of an element.
border-left-styleDefines the style of the left border of an element.
border-left-widthDefines the width of the left border of an element.
border-radiusRounds the corners of an element's outer border edge.
border-rightShorthand for setting all the properties of the right border of an element.
border-right-colorDefines the color of the right border of an element.
border-right-styleDefines the style of the right border of an element.
border-right-widthDefines the width of the right border of an element.
border-spacingDefines a distance between borders of adjacent cells in a table.
border-start-end-radiusDefines a top-right border radius on an element, between the block-start and inline-end sides.
border-start-start-radiusDefines a top-left border radius on an element, between the block-start and inline-start sides.
border-styleSets the line style for all four sides of an element's border.
border-topShorthand property setting all the properties of the top border of an element.
border-top-colorDefines the color of the top border.
border-top-left-radiusSets the roundness of the top-left corner of an element's border.
border-top-right-radiusRounds the top-right corner of an element.
border-top-styleSets the line style of top border of an element.
border-top-widthSets the width of top border of an element.
border-widthSets the width of an element's border.
bottomSets the vertical position of an element.
box-decoration-breakDefines how an element's border and background will behave during page breaks or, in the case of inline elements, at line breaks.
box-shadowAdds a shadow effect around an element.
box-sizingSets the way, the total width and height of an element is calculated.
break-afterDefines whether the given element should be followed by a page, column, or region break.
break-beforeDefines whether a region, page, or column break should come before the given element.
break-insideDefines if the given element should have a page, column, or region break inside of it.

C

PropertyDescriptionExample
caption-sideDefines where a table caption should be positioned.
caret-colorDefines the color of the editable cursor (caret) in text areas, input fields, and other elements.
@charsetProvides details about the character encoding that the style sheet uses.
clearDefines the behavior of the element next to a floating element.
clipClips an element that is precisely positioned.
clip-pathCreates a clipping region that sets the part of the element to be shown.
colorDefines the foreground color of a text.
column-countDefines the number of columns into which an element should be divided.
column-fillControls an element's contents and break it into columns.
column-gapDefines the size of the gap that exists between the columns in a multi-column layout..
column-ruleShorthand property that sets the color, style, and width of the line drawn between columns in a multi-column layout.
column-rule-colorSets the color of the line drawn between columns in a multi-column layout.
column-rule-styleSets the style of the line drawn between columns in a multi-column layout.
column-rule-widthSets the width of the line drawn between columns in a multi-column layout.
column-spanDefines whether an element should span across one column or all columns, in a multi-column layout.
column-widthSets the column width in a multi-column layout.
columnsShorthand property for setting the width and count of columns.
contentReplaces content with a generated value.
counter-incrementUsed to increase or decrease the value of named CSS counters.
counter-resetCreates named CSS counters and initializes a specific value to them.
counter-setSets a given value to a CSS counter.
cursorDefines the mouse pointer that will be displayed when pointing at an item.

D

PropertyDescriptionExample
directionSets the direction of the text, table columns, and horizontal overflow.
displayDefines the display method for a certain HTML element.

E

PropertyDescriptionExample
empty-cellsDefines whether borders and backgrounds to be shown on empty cells in a table.

F

PropertyDescriptionExample
filterApplies graphical effects to an element.
flexShorthand property that sets whether a flex item will grow or shrink.
flex-basisCSS flex-basis property sets the initial size of a flex item on the main axis before distributing the remaining space among the flex items
flex-directionCSS flex-direction property determines the direction in which flex items are placed within a flex container. ( horizontal and vertical )
flex-flowShorthand property for specifying the direction and wrapping behavior of a flex container.
flex-growDetermines how much extra space a flex item should take up in the flex container along its main axis.
flex-shrinkDefines the shrinking of the item in relation to the others.
flex-wrapCSS flex-wrap property determines whether flex items should remain on a single line or are allowed to wrap onto multiple lines depending on the availability of space.
floatPlaces an element on left or right side of its container.
fontShorthand property for setting all the font related properties.
font-familyDefines the text's font family.
font-feature-settingsUsed to enable or disable specific OpenType font features, which control how text is rendered using advanced font features like ligatures, kerning, stylistic sets
font-kerningDetermines how the kerning information, the spacing between letters, is used.
font-language-overrideUsed to adjusting the rendering of glyphs and features to match the linguistic needs of different languages.
font-sizeDetermines the font size of the text.
font-size-adjustPreserves text readability in the event of a font fallback.
font-stretchSelects the standard, condensed, or expanded face of a font.
font-styleSets the text's font style.
font-synthesisDetermines whether or not the browser should synthesize a style that are missing in a font-family.
font-variantSets all the font variants for a font.
font-variant-alternateControls the use of alternate glyphs.
font-variant-capsControls the use of alternate glyphs used for small capitals.
font-variant-east-asianRegulates the use of alternate glyphs for East Asian scripts, such as Chinese and Japanese.
font-variant-ligaturesRegulates the usage of contextual forms and ligatures.
font-variant-numericRegulates the use of different glyphs for ordinal markers, fractions, and integers.
font-variant-positionRegulates the use of smaller alternate glyphs that are positioned as superscript or subscript.
font-weightSpecifies the weight of a font.

G

PropertyDescriptionExample
gapShorthand property that sets the gaps for the rows and columns in grid layout system (Also used to add gaps in multi-column layout of texts).
gridShorthand property for setting all grid related properties in one declaration.
grid-areaShorthand property specifying the grid item's size and location inside a grid.
grid-auto-columnsDefines the default size of a column.
grid-auto-flowDefines the grid's auto-placed item insertion process.
grid-auto-rowsDefines the default row size.
grid-columnShorthand property specifying the grid item's size and location inside a grid column.
grid-column-endDefines the end point of the grid item within grid column.
grid-column-startDefines the start point of the grid item within grid column.
grid-rowShorthand property specifying the grid item's size and location inside a grid row.
grid-row-endSpecifies the end point of grid item within grid row.
grid-row-gapDefines the gap between rows in terms of size.
grid-row-startSpecifies the start point of grid item within grid row.
grid-templateShorthand property specifying properties related to grid columns, grid rows and grid areas.
grid-template-areasDefines named grid items and their use in displaying columns and rows.
grid-template-columnsDefines the number of and what size columns are there in a grid layout.
grid-template-rowsDefines the size of the rows in a grid layout.

H

PropertyDescriptionExample
heightDefines an element's height.
hyphensDefines how to divide words to enhance text layout.
hyphenate-characterUsed to change default hyphenation character (-).

I

PropertyDescriptionExample
image-renderingDefines the kind of image scaling approach to be used.
inline-sizeDefines the horizontal and vertical size of an element's block.
insetIndicates the distance an element is from edges of its parent element.
inset-blockDefines the logical block start and end offsets of an element.
inset-block-endDefines the logical block end offsets of an element.
inset-block-startDefines the logical block start offsets of an element.
inset-inlineDefines the logical start and end offsets of an element in the inline direction.
inset-inline-endDefines the distance, measured in the inline direction, between an element's end and its parent element.
inset-inline-startDefines the distance, measured in the inline direction, between an element's start and it's parent element.
isolationDefines if a new stacking content must be created by an element.

J

PropertyDescriptionExample
justify-contentDefines how space is distributed between and around content items in a flex and grid container.
justify-itemsDefines how grid elements should be aligned along the horizontal axis within a grid container.
justify-selfDefines how a grid item should be aligned in the inline direction that resides within a grid container.
@keyframesDefines a set of keyframes for animations or transitions.

L

PropertyDescriptionExample
leftDefines the horizontal position of an element.
letter-spacingSets the horizontal spacing between text characters.
line-breakDefines if and how to break lines of East Asian scripts.
line-heightDefines the height of a line box.
list-styleShorthand property to set all the list style properties in single declaration.
list-style-imageSets an image as the list item marker.
list-style-positionSets the position of the marker in a list.
list-style-typeDefines the kind of list item marker.

M

PropertyDescriptionExample
marginShorthand property to set the margins on all four sides of an element.
margin-blockShorthand property defining the logical block start and end margins for an element.
margin-block-endSets the margin space at the end of an element in the block direction.
margin-block-startSets the margin space at the start of an element in the block direction.
margin-bottomSets the margin area on the bottom of an element.
margin-inlineDefines the logical inline start and end margins of an element.
margin-inline-endDefines the logical inline end margin of an element.
margin-inline-startDefines the logical inline start margin of an element.
margin-leftSets the margin area on the left side of an element.
margin-rightSets the margin area on the right side of an element.
margin-topSets the margin on the top side of an element.
maskMasks or clips the image at particular points to hide an element (partially or completely).
mask-clipDetermines the area covered by a mask.
mask-compositeDisplays the mask layers that are below the current mask layer after a compositing operation is performed.
mask-imageSets an image to be used as an element's mask layer.
mask-modeDefines whether the mask reference given by mask-image should be considered as a luminance or alpha mask.
mask-originDefines the origin of the mask image.
mask-positionDefines the positioning of a mask image within an element.
mask-repeatDefines how a mask image should be repeated within an element.
mask-sizeDefines the size of a mask image applied to an element using the mask-image property.
mask-typeSets an SVG <mask> element as a luminance or an alpha mask.
max-heightSets an maximum height for an element to occupy in layout.
max-widthSets an maximum width for an element to occupy in layout.
@mediaSets CSS style rules for specific media types, devices, and sizes.
max-block-sizeSets the maximum size of an element in the opposite direction to its writing direction.
max-inline-sizeDefines the horizontal or vertical maximum size of an element's block.
min-block-sizeSets the minimum size, either horizontally or vertically of an element's block based on its writing mode.
min-inline-sizeDefines the minimum horizontal or vertical size of an element's block.
min-heightSets a lower bound on the height of an element.
min-widthSets a lower bound on the width of an element.
mix-blend-modeDefines how the element's content should blend with the content of its parent and the element's background.

O

PropertyDescriptionExample
object-fitDefines how an image or video should be resized or cropped to fit within its container.
object-positionDefines the position of the content inside an element that has a defined size.
offsetShorthand property that makes used to position elements in container.
offset-anchorDefines the moving position of an element inside a box traveling along an offset-path.
offset-distanceDefines the position along an offset-path where an element should be placed.
offset-pathDefines an element's path inside its parent container or SVG coordinate system.
offset-rotateDefines the orientation or direction of an element as it moves along the specified offset-path.
opacitySets the transparency of an element.
orderDefines the order in which flex items appear within a flex container.
orphansDefines the minimum number of lines required at the bottom of a page, region, or column to prevent a break.
outlineSets the width, color, and style of an outline around an element. The outline is used to highlight an element when focused.
outline-colorSets the color of an outline around an element.
outline-offsetDefines the space between an outline and the border edge of an element.
outline-styleDetermines the style of an outline around an element.
outline-widthDefines the width of the outline around an element.
overflowDefines how to handle content that overflows the boundaries of its container.
overflow-anchorProvides a way to disable the browser's scroll anchoring behavior, which adjusts scroll position to reduce content shifting.
overflow-wrapAllows the browser to split a line of text into an unbreakable string to keep the content from overflowing its container.
overflow-clip-marginDefines the distance that content can overflow the element's box before being clipped.
overflow-xDefines that an element's content will overflow to its left and right margins, as well as horizontally.
overflow-yDefines how the content of a block-level element is displayed when it exceeds the element's top and bottom edges.
overflow-blockDefines how the content of an element behaves when it exceeds the left and right boundaries of its box.
overflow-inlineDefines how overflowing content is displayed when it overflows the inline edges of an element.
overscroll-behaviorDetermines what a browser does when the boundary of a scrolling area is reached.
overscroll-behavior-blockDetermines how the browser behaves when the block direction border of a scrolling region is reached.
overscroll-behavior-inlineDetermines how the browser behaves when the inline direction border of a scrolling region is reached.
overscroll-behavior-xDetermines what a browser does when the horizontal boundary of a scrolling area is reached.
overscroll-behavior-yDetermines what a browser does when the vertical boundary of a scrolling area is reached.

P

PropertyDescriptionExample
paddingShorthand property that defines the padding for all sides of an element.
padding-blockDetermines the logical block start and end padding of an element.
padding-block-endDetermines the logical block end padding of an element.
padding-block-startSets the width of the padding on the bottom of an element.
padding-bottomSets the width of the padding on the bottom of an element.
padding-inlineDetermines the logical inline start and end padding of an element.
padding-inline-endDetermines the logical inline end padding of an element.
padding-inline-startDetermines the logical inline start padding of an element.
padding-leftSets the padding space on the left side of an element.
padding-rightSets the padding space on the right side of an element.
padding-topSets the padding space on the top side of an element.
perspectiveDefines the distance between the z=0 plane and the user.
perspective-originDefines the position at which viewer / user is looking.
place-contentAligns content in both the block (column) and inline (row) axes simultaneously. It's shorthand for align-content and justify-content properties.
place-itemsAligns the items within the grid and flexbox container along both the block (column) and inline (row) axes. It's shorthand for align-items and justify-items properties.
place-selfAligns the individual items in both block and inline directions simultaneously. It's shorthand for align-self and justify-self properties.
pointer-eventsDetermines whether or not an element receive pointer events.
positionDefines the position of an element on a web page.

Q

PropertyDescriptionExample
quotesDefines the style of quotation marks to be used for embedded quotes.

R

PropertyDescriptionExample
resizeDefines if and how a user can resize an element.
rightControls the horizontal position of an element
rotateDefines the way an element rotates.
row-gapDefines the gap between the grid rows. Also used to add gap between columns in multi-column layout.

S

PropertyDescriptionExample
scaleSpecifies the scale transformation of elements, independent of transform property.
scroll-behaviorDefines how smoothly the browser scrolls when a user clicks on a link or uses the scroll bar.
scroll-marginDefines the margin of an element within the snap area.
scroll-margin-blockShorthand property that defines the margin of the scroll snap area at the block axis.
scroll-margin-block-endDefines the margin of the scroll snap area at the end of the block axis.
scroll-margin-block-startDefines the margin of the scroll snap area at the start of the block axis.
scroll-margin-bottomDefines the margin at the bottom of a scrolling container.
scroll-margin-inlineSets the scroll margin of an element in the line (horizontal axis) dimension.
scroll-margin-inline-endDefines the margin for the scroll snap region at the end of the horizontal dimension.
scroll-margin-inline-startDefines the margin for the scroll snap area at the start of the horizontal dimension.
scroll-margin-leftDefines the left margin of the scroll snap area of an element.
scroll-margin-topDefines the top margin of the scroll snap area of an element.
scroll-margin-rightDefines the right margin of the scroll snap area of an element.
scroll-paddingDefines the scroll padding between the edge of the scroll container and the area of an element that snaps into place once scrolling stops.
scroll-padding-blockDefines the scroll padding of an element in the block dimension.
scroll-padding-block-startDefines the offsets for the start edge of the scroll padding of an element in the block dimension.
scroll-padding-block-endDefines the offsets for the end edge of the scroll padding of an element in the block dimension.
scroll-padding-bottomDefines the bottom offset of the scroll snap area of an element.
scroll-padding-leftDefines the amount of space between the left edge of the scroll container and the scroll snap area of an element.
scroll-padding-rightDefines the amount of space between the right edge of the scroll container and the scroll snap area of an element.
scroll-padding-topDefines the top offset of the scroll snap area of an element.
scroll-padding-inlineDefines the scroll padding of an element in the inline dimension.
scroll-padding-inline-startDefines the offsets for the start edge of the scrollport, in the inline dimension.
scroll-padding-inline-endDefines the offsets for the end edge of the scrollport, in the inline dimension.
scroll-snap-alignDefines how a snapped element is positioned within its snap container.
scroll-snap-shotDetermines whether the scroll container will scroll past or stick to the nearest snap positions.
scroll-snap-typeDefines how the scroll container snaps to snap positions.
scrollbar-colorDefines the color of the scrollbar track and thumb.
scrollbar-widthUsed to style the width of scrollbar track and thumb.
scrollbar-gutterIt helps to create a fixed space for the scrollbar.
shape-image-thresholdSpecifies the alpha channel threshold for shape extraction when using an image with the shape-outside property.
shape-marginDefines the margin around a specified CSS shape.
shape-outsideDefines a shape around which inline content should wrap.

T

PropertyDescriptionExample
tab-sizeDefines the width of tab characters within an element.
table-layoutDefines the way the <table> cells, rows, and columns are displayed.
text-alignDefines the alignment of the text with the margin of the page.
text-align-lastSets the way the last line of a block or a line, just before a forced line break, is aligned.
text-combine-uprightDefines how to fit several characters into a single character's area.
text-decorationDefines the decoration added to text.
text-decoration-colorDefines the color of the text decoration.
text-decoration-lineUsed to add a decoration line to the text.
text-decoration-styleUsed to add style to the text decoration line.
text-decoration-thicknessUsed to add thickness to the text decoration line.
text-emphasisShorthand property that is used to add emphasis to text.
text-emphasis-colorUsed to set the color of the emphasis marks around a text.
text-emphasis-positionUsed to set the position of the emphasis mark around a text.
text-emphasis-styleDefines the appearance of emphasis marks.
text-indentDefines the indentation of the first line of the text.
text-justifySpecifies the justification method of text when text-align is set to "justify".
text-orientationDefines the orientation of text characters in a line.
text-overflowControls how hidden overflow content is displayed to users.
text-shadowUsed to add a shadow effect to text.
text-transformChange the appearance of text by transforming it in various ways.
text-underline-offsetDefines the distance of an underline text decoration line from its initial position.
text-underline-positionDefines where the underlining text decoration should be positioned.
topDefines vertical position of an element relative to its containing element.
transformIt is useful in rotation, scaling, skewing, or translation of an element.
transform-boxDefines the layout box to which transformation properties relate.
transform-originHelps in setting the origin for the transformation of an element.
transform-styleDefines the 3D space rendering of nested items.
transitionA property that works as a shorthand for every transition property.
transition-delayDefines the amount of time to wait before starting a transition effect
transition-durationDefines the amount of time that a transition animation should take to complete.
transition-propertyDefines which CSS properties should have a transition effect applied.
transition-timing-functionDefines the transition effect's speed curve.
translateAllows you to move an element along the X, Y, and Z axes.

U

PropertyDescriptionExample
unicode-bidiControls how bidirectional text is displayed in a document.
user-selectDetermines if text can be selected by the user.

V

PropertyDescriptionExample
vertical-alignDefines an element's vertical alignment.
visibilityDefines if an element needs to be shown or hidden without changing the layout of a document.

W

PropertyDescriptionExample
white-spaceDefines the white space flow inside the text in an element.
widowsDefines how many lines a page or column must have left at the top.
widthDefines the width of an element's content area.
word-breakDefines how words should be broken or wrapped in case they exceed the available width of an element.
word-spacingDefines the space between the words in a text.
writing-modeDefines if text should be displayed vertically or horizontally.

Z

PropertyDescriptionExample
z-indexControls the stacking order of elements in web page.
No results found