mozilla
Your Search Results

    CSS values syntax

    Animations

    Property Syntax Initial value Inherited Media
    animation <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> the concatenation of the initial values of its longhand properties:
    • animation-name: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • animation-duration: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • animation-timing-function: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • animation-delay: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • animation-iteration-count: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • animation-direction: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • animation-fill-mode: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • animation-play-state: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    animation-delay <time># 0s no visual
    animation-direction <single-animation-direction>#
    where <single-animation-direction> = normal | reverse | alternate | alternate-reverse
    normal no visual
    animation-duration <time># 0s no visual
    animation-fill-mode <single-animation-fill-mode>#
    where <single-animation-fill-mode> = none | forwards | backwards | both
    none no visual
    animation-iteration-count <single-animation-iteration-count>#
    where <single-animation-iteration-count> = infinite | <number>
    1 no visual
    animation-name <single-animation-name>#
    where <single-animation-name> = none | IDENT
    none no visual
    animation-play-state <single-animation-play-state>#
    where <single-animation-play-state> = running | paused
    running no visual
    animation-timing-function <timing-function># ease no visual

    Transitions

    Property Syntax Initial value Inherited Media
    transition [ none | <single-transition-property> ] || <time> || <timing-function> || <time> the concatenation of the initial values of its longhand properties:
    • transition-delay: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • transition-duration: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • transition-property: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • transition-timing-function: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no interactive
    transition-delay <time># 0s no interactive
    transition-duration <time># 0s no interactive
    transition-property none | <single-transition-property>#  [ ‘,’ <single-transition-property># ]*

    where <single-transition-property> = all | IDENT
    all no visual
    transition-timing-function <timing-function># ease no interactive

    Transforms

    Property Syntax Initial value Inherited Media
    transform none | <transform-function>+ none no visual
    transform-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>? 50% 50% 0 no visual
    transform-style flat | preserve-3d flat no visual
    perspective none | <length> none no visual
    perspective-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] 50% 50% no visual
    backface-visibility visible | hidden visible no visual

    Color

    Property Syntax Initial value Inherited Media
    color <color> Varies from one browser to another yes visual
    opacity <number> 1.0 no visual

    Columns

    Property Syntax Initial value Inherited Media
    columns <'column-width'> || <'column-count'> the concatenation of the initial values of its longhand properties:
    • column-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • column-count: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    column-width <length> | auto auto no visual
    column-count <number> | auto auto no visual
    column-gap <length> | normal normal no visual
    column-rule <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'> the concatenation of the initial values of its longhand properties:
    • column-rule-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • column-rule-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • column-rule-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    column-rule-color <color> currentColor no visual
    column-rule-style <br-style> none no visual
    column-rule-width <br-width> medium no visual
    break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-colum auto no paged
    break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-colum auto no paged
    break-inside auto | avoid | avoid-page | avoid-column auto no paged
    column-span none | all none no visual
    column-fill auto | balance balance no visual, but, in continuous media, has no effect in overflow columns

    Text

    Property Syntax Initial value Inherited Media
    hyphens none | manual | auto manual yes visual
    letter-spacing normal | <length> normal yes visual
    word-wrap normal | break-word normal yes visual
    overflow-wrap normal | break-word normal yes visual
    text-transform none | capitalize | uppercase | lowercase | full-width none yes visual
    tab-size | <length"><integer> | <length> 8 yes visual
    text-align start | end | left | right | center | justify | match-parent | start end start, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser. yes visual
    text-align-last auto | start | end | left | right | center | justify auto yes visual
    text-indent <length> | <percentage> && [ hanging || each-line ] 0 yes visual
    white-space normal | pre | nowrap | pre-wrap | pre-line normal yes visual
    word-break normal | break-all | keep-all normal yes visual
    word-spacing normal | <length> normal yes visual
    line-break auto | loose | normal | strict auto no visual

    Text decorations

    Property Syntax Initial value Inherited Media
    text-decoration <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> the concatenation of the initial values of its longhand properties:
    • text-decoration-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • text-decoration-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • text-decoration-line: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    text-decoration-color <color> currentColor no visual
    text-decoration-style solid | double | dotted | dashed | wavy solid no visual
    text-decoration-line none | [ underline || overline || line-through || blink ] none no visual
    text-decoration-skip none | [ objects || spaces || ink || edges || box-decoration ] objects yes visual
    text-shadow none | <shadow-t>#
    where <shadow-t> = [ <length>{2,3} && <color>? ]
    none yes visual
    text-underline-position auto | [ under || [ left | right ] ] auto yes visual

    Writing modes

    Property Syntax Initial value Inherited Media
    direction ltr | rtl ltr yes visual
    unicode-bidi normal | embed | isolate | bidi-override | isolate-override | plaintext normal no visual
    writing-mode horizontal-tb | vertical-rl | vertical-lr horizontal-tb yes visual
    text-orientation mixed | upright | sideways-right | sideways-left | sideways | use-glyph-orientation mixed yes visual

    Flexible boxes

    Property Syntax Initial value Inherited Media
    align-content flex-start | flex-end | center | space-between | space-around | stretch stretch no visual
    align-items flex-start | flex-end | center | baseline | stretch stretch no visual
    align-self auto | flex-start | flex-end | center | baseline | stretch auto no visual
    flex-basis content | <'width'> auto no visual
    flex-direction row | row-reverse | column | column-reverse row no visual
    flex-flow <'flex-direction'> || <'flex-wrap'> the concatenation of the initial values of its longhand properties:
    • flex-direction: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • flex-wrap: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    flex-grow <number> 0 no visual
    flex-shrink <number> 1 no visual
    flex none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] the concatenation of the initial values of its longhand properties:
    • flex-grow: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • flex-shrink: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • flex-basis: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    flex-wrap nowrap | wrap | wrap-reverse nowrap no visual
    justify-content flex-start | flex-end | center | space-between | space-around flex-start no visual
    order <integer> 0 no visual

    Background & Borders

    Property Syntax Initial value Inherited Media
    background [ <bg-layer> , ]* <final-bg-layer>
    where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
    and <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>
    the concatenation of the initial values of its longhand properties:
    • background-image: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • background-position: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • background-size: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • background-repeat: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • background-origin: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • background-clip: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • background-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    background-attachment <attachment>#
    where <attachment> = scroll | fixed | local
    scroll no visual
    background-clip <box>#
    where <box> = border-box | padding-box | content-box
    border-box no visual
    background-color <color> transparent no visual
    background-image <bg-image>#
    where <bg-image> = none | <image>
    none no visual
    background-origin <box># padding-box no visual
    background-position <position># 0% 0% no visual
    background-repeat <repeat-style>#
    where <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
    repeat no visual
    background-size <bg-size>#
    where <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
    auto auto no visual
    border <br-width> || <br-style> || <color> the concatenation of the initial values of its longhand properties:
    • border-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    border-bottom <br-width> || <br-style> || <color> the concatenation of the initial values of its longhand properties:
    • border-bottom-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-bottom-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-bottom-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    border-bottom-color <color> currentColor no visual
    border-bottom-left-radius [ <length> | <percentage> ]{1,2} 0 no visual
    border-bottom-right-radius [ <length> | <percentage> ]{1,2} 0 no visual
    border-bottom-style <br-style> none no visual
    border-bottom-width <br-width> medium no visual
    border-color <color>{1,4} the concatenation of the initial values of its longhand properties:
    • border-top-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-right-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-bottom-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-left-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    border-image <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'> the concatenation of the initial values of its longhand properties:
    • border-image-source: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-image-slice: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-image-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-image-outset: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-image-repeat: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    border-image-outset [ <length> | <number> ]{1,4} 0s no visual
    border-image-repeat [ stretch | repeat | round ]{1,2} stretch no visual
    border-image-slice [<number> | <percentage>]{1,4} && fill? 100% no visual
    border-image-source none | <image> none no visual
    border-image-width [ <length> | <percentage> | <number> | auto ]{1,4} 1 no visual
    border-left <br-width> || <br-style> || <color> the concatenation of the initial values of its longhand properties:
    • border-left-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-left-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-left-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    border-left-color <color> currentColor no visual
    border-left-style <br-style> none no visual
    border-left-width <br-width> medium no visual
    border-radius [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? the concatenation of the initial values of its longhand properties:
    • border-top-left-radius: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-top-right-radius: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-bottom-right-radius: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-bottom-left-radius: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    border-right <br-width> || <br-style> || <color> the concatenation of the initial values of its longhand properties:
    • border-right-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-right-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-right-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    border-right-color <color> currentColor no visual
    border-right-style <br-style> none no visual
    border-right-width <br-width> medium no visual
    border-style <br-style>{1,4}
    where <br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
    the concatenation of the initial values of its longhand properties:
    • border-top-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-right-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-bottom-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-left-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    border-top <br-width> || <br-style> || <color> the concatenation of the initial values of its longhand properties:
    • border-top-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-top-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-top-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    border-top-color <color> currentColor no visual
    border-top-left-radius [ <length> | <percentage> ]{1,2} 0 no visual
    border-top-right-radius [ <length> | <percentage> ]{1,2} 0 no visual
    border-top-style <br-style> none no visual
    border-top-width <br-width> medium no visual
    border-width <br-width>{1,4}
    where <br-width> = <length> | thin | medium | thick
    the concatenation of the initial values of its longhand properties:
    • border-top-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-right-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-bottom-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-left-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual

    Box Model

    Property Syntax Initial value Inherited Media
    box-decoration-break slice | clone slice no visual
    box-shadow none | <shadow>#
    where <shadow> = inset? && [ <length>{2,4} && <color>? ]
    none no visual
    margin [ <length> | <percentage> | auto ]{1,4} the concatenation of the initial values of its longhand properties:
    • margin-bottom: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • margin-left: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • margin-right: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • margin-top: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    margin-bottom <length> | <percentage> | auto 0 no visual
    margin-left <length> | <percentage> | auto 0 no visual
    margin-right <length> | <percentage> | auto 0 no visual
    margin-top <length> | <percentage> | auto 0 no visual
    padding [ <length> | <percentage> ]{1,4} the concatenation of the initial values of its longhand properties:
    • padding-bottom: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • padding-left: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • padding-right: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • padding-top: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual
    padding-bottom <length> | <percentage> 0 no visual
    padding-left <length> | <percentage> 0 no visual
    padding-right <length> | <percentage> 0 no visual
    padding-top <length> | <percentage> 0 no visual
    box-sizing content-box | padding-box | border-box content-box no visual
    max-height <length> | <percentage> | none | max-content | min-content | fit-content | fill-available none no visual
    min-height <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available 0 no visual
    height auto | <length> | <percentage> auto no visual
    max-width <length> | <percentage> | none | max-content | min-content | fit-content | fill-available none no visual
    min-width <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available 0 no visual
    width [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto auto no visual
    overflow visible | hidden | scroll | auto visible no visual
    overflow-x visible | hidden | scroll | auto visible no visual
    overflow-y visible | hidden | scroll | auto visible no visual
    visibility visible | hidden | collapse visible yes visual

    Table

    Property Syntax Initial value Inherited Media
    border-collapse collapse | separate separate yes visual
    border-spacing <length> <length>? 0 yes visual
    caption-side top | bottom | block-start | block-end | inline-start | inline-end top yes visual
    empty-cells show | hide show yes visual
    table-layout auto | fixed auto no visual
    vertical-align baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> baseline no visual

    Positioning

    Property Syntax Initial value Inherited Media
    bottom <length> | <percentage> | auto auto no visual
    left <length> | <percentage> | auto auto no visual
    right <length> | <percentage> | auto auto no visual
    top <length> | <percentage> | auto auto no visual
    float left | right | none none no visual
    clear none | left | right | both none no visual
    position static | relative | absolute | sticky | fixed static no visual
    z-index auto | <integer> auto no visual

    Fonts

    Property Syntax Initial value Inherited Media
    font [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar the concatenation of the initial values of its longhand properties:
    • font-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • font-variant: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • font-weight: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • font-stretch: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • font-size: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • line-height: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • font-family: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    yes visual
    font-family [ <family-name> | <generic-family> ]#
    where <family-name> = <string> | <IDENT>+
    and <generic-name> = serif | sans-serif | cursive | fantasy | monospace
    depends on user agent yes visual
    font-variant normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ] normal yes visual
    font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal yes visual
    font-stretch normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal yes visual
    font-size <absolute-size> | <relative-size> | <length> | <percentage>
    where <absolute-size> = xx-small | s-small | small | medium | large | x-large | xx-large
    and <relative-size> = larger | smaller
    medium yes visual
    line-height normal | <number> | <length> | <percentage> normal yes visual
    font-feature-settings normal | <feature-tag-value>#
    where <feature-tag-value> = <string> [ <integer> | on | off ]?
    normal yes visual
    font-language-override normal | <string> normal yes visual
    font-size-adjust none | <number> none yes visual
    font-style normal | italic | oblique normal yes visual
    font-synthesis none | [ weight || style ] weight style yes visual
    font-kerning auto | normal | none auto yes visual
    font-variant-ligatures normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]
    where <common-lig-values> = [ common-ligatures | no-common-ligatures ]
    and <discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]
    and <historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]
    and <contextual-alt-values> = [ contextual | no-contextual ]
    normal yes visual
    font-variant-position normal | sub | super normal yes visual
    font-variant-caps normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps normal yes visual
    font-variant-numeric normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
    where <numeric-figure-values> = [ lining-nums | oldstyle-nums ]
    and <numeric-spacing-values> = [ proportional-nums | tabular-nums ]
    and <numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
    normal yes visual
    font-variant-east-asian normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]
    where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
    and <east-asian-width-values> = [ full-width | proportional-width ]
    normal yes visual
    font-variant-alternates normal | [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ]
    where <feature-value-name> = IDENT
    normal yes visual

    Images

    Property Syntax Initial value Inherited Media
    object-fit fill | contain | cover | none | scale-down fill yes visual
    object-position <position> 50% 50% yes visual
    image-rendering auto | crisp-edges | pixelated auto yes visual
    image-orientation from-image | <angle> | [<angle>? flip] 0deg yes visual

    Counters & Lists

    Property Syntax Initial value Inherited Media
    counter-increment [<user-ident> <integer>?]+ | none none no all
    counter-reset [<user-ident> <integer>?]+ | none none no all
    list-style <'list-style-type'> || <'list-style-position'> || <'list-style-image'> the concatenation of the initial values of its longhand properties:
    • list-style-type: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • list-style-position: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • list-style-image: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    yes visual
    list-style-image <uri> | none none yes visual
    list-style-position inside | outside outside yes visual
    list-style-type <custom-ident> | symbols) disc yes visual

    Page

    Property Syntax Initial value Inherited Media
    orphans <integer> 2 yes visual, paged
    page-break-after auto | always | avoid | left | right auto no visual, paged
    page-break-before auto | always | avoid | left | right auto no visual, paged
    page-break-inside auto | avoid auto no visual, paged
    widows <integer> 2 yes visual, paged

    User interface

    Property Syntax Initial value Inherited Media
    outline <'outline-color'> || <'outline-style'> || <'outline-width'> the concatenation of the initial values of its longhand properties:
    • outline-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • outline-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • outline-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual, interactive
    outline-color <color> | invert invert, for browsers supporting it, currentColor for the other no visual, interactive
    outline-width <br-width> medium no visual, interactive
    outline-style auto | <br-style> none no visual, interactive
    outline-offset <length> 0 no visual, interactive
    cursor [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] auto yes visual, interactive
    resize none | both | horizontal | vertical none no visual
    text-overflow [ clip | ellipsis | <string> ]{1,2} clip no visual

    Generated content

    Property Syntax Initial value Inherited Media
    content normal | none | [ <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ normal no all
    quotes [<string> <string>]+ | none user agent specific yes visual

    Fragmentation

    Property Syntax Initial value Inherited Media
    box-decoration-break slice | clone slice no visual

    Miscellaneous

    Property Syntax Initial value Inherited Media
    clip <shape> | auto
    where <shape> = rect(<top>, <right>, <bottom>, <left>)
    auto no visual
    display none | inline | block | list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents inline no all
    ime-mode auto | normal | active | inactive | disabled auto no interactive
    all initial | inherit | unset There is no practical initial value for it. no There is no practical media for it.
    will-change auto | <animateable-feature>#
    where <animateable-feature> = scroll-position | contents | <custom-ident>
    auto no all

    Compositing and Blending

    Property Syntax Initial value Inherited Media
    background-blend-mode <blend-mode># normal no none
    mix-blend-mode <blend-mode> normal no visual
    isolation auto | isolate auto no visual

    Shapes

    Property Syntax Initial value Inherited Media
    shape-outside none | <shape-box> || <basic-shape> | <image> none no visual
    shape-margin <length> | <percentage> 0 no visual
    shape-image-threshold <number> 0.0 no visual

    Pointer Events

    Property Syntax Initial value Inherited Media
    touch-action auto | none | [ pan-x || pan-y ] | manipulation auto no visual

    Inline

    Property Syntax Initial value Inherited Media
    initial-letter normal | [<number> <integer>?]</integer></number> normal no visual
    initial-letter-align [ auto | alphabetic | hanging | ideographic ] auto no visual

    Display

    Property Syntax Initial value Inherited Media
    display-inside auto | block | table | flex | grid | ruby auto no all
    display-outside block-level | inline-level | run-in | contents | none | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container inline-level no all
    display-list none | list-item none no all
    box-suppress show | discard | hide show no all

    CSSOM View

    Property Syntax Initial value Inherited Media
    scroll-behavior auto | smooth auto no visual

    Logical Properties

    Property Syntax Initial value Inherited Media
    block-size <'width'> auto no visual
    inline-size <'width'> auto no visual
    min-block-size <'min-width'> 0 no visual
    min-inline-size <'min-width'> 0 no visual
    max-block-size <'max-width'> 0 no visual
    max-inline-size <'max-width'> 0 no visual
    margin-block-start <'margin-left'> 0 no visual
    margin-block-end <'margin-left'> 0 no visual
    margin-inline-start <'margin-left'> 0 no visual
    margin-inline-end <'margin-left'> 0 no visual
    offset-block-start <'left'> auto no visual
    offset-block-end <'left'> auto no visual
    offset-inline-start <'left'> auto no visual
    offset-inline-end <'left'> auto no visual
    padding-block-start <'padding-left'> 0 no visual
    padding-block-end <'padding-left'> 0 no visual
    padding-inline-start <'padding-left'> 0 no visual
    padding-inline-end <'padding-left'> 0 no visual
    border-block-start-width <'border-width'> medium no visual
    border-block-end-width <'border-width'> medium no visual
    border-inline-start-width <'border-width'> medium no visual
    border-inline-end-width <'border-width'> medium no visual
    border-block-start-style <'border-style'> none no visual
    border-block-end-style <'border-style'> none no visual
    border-inline-start-style <'border-style'> none no visual
    border-inline-end-style <'border-style'> none no visual
    border-block-start-color <'color'> currentcolor no visual
    border-block-end-color <'color'> currentcolor no visual
    border-inline-start-color <'color'> currentcolor no visual
    border-inline-end-color <'color'> currentcolor no visual
    border-block-start <'border-width'> || <'border-style'> || <'color'> currentcolor no visual
    border-block-end <'border-width'> || <'border-style'> || <'color'> currentcolor no visual
    border-inline-start <'border-width'> || <'border-style'> || <'color'> currentcolor no visual
    border-inline-end <'border-width'> || <'border-style'> || <'color'> currentcolor no visual

    Device Adaption

    Property Syntax Initial value Inherited Media
    @viewport/min-width <viewport-length> auto no visual, continuous
    @viewport/max-width <viewport-length> auto no visual, continuous
    @viewport/width <viewport-length>{1,2} the concatenation of the initial values of its longhand properties:
    • @viewport/min-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • @viewport/max-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual, continuous
    @viewport/min-height <viewport-length> auto no visual, continuous
    @viewport/max-height <viewport-length> auto no visual, continuous
    @viewport/height <viewport-length>{1,2} the concatenation of the initial values of its longhand properties:
    • @viewport/min-height: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • @viewport/max-height: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    no visual, continuous
    @viewport/zoom auto | <number> | <percentage> auto no visual, continuous
    @viewport/min-zoom auto | <number> | <percentage> auto no visual, continuous
    @viewport/max-zoom auto | <number> | <percentage> auto no visual, continuous
    @viewport/user-zoom zoom | fixed zoom no visual, continuous
    @viewport/orientation auto | portrait | landscape auto no visual, continuous

    Counter Style

    Property Syntax Initial value Inherited Media
    @counter-style/system cyclic | numeric | alphabetic | symbolic | additive | [fixed <integer>?] | [ extends <counter-style-name> ] symbolic    
    @counter-style/range [[<integer> | infinite ] {2,2}#] | auto auto    
    @counter-style/prefix <symbol> empty string    

    Document Tags and Contributors

    Last updated by: snlacks,