A CSS property (such as color), or multiple properties grouped into one.

invisible : Style
invisible =
    display none

This corresponds to the CSS display: none.

boldAndUnderlineOnHover : Style
boldAndUnderlineOnHover =
    hover [ textDecoration underline, fontWeight bold ]

This (roughly) corresponds to the CSS :hover { text-decoration: underline; font-weight: bold; }.

You can use Style values to reuse styles (like mixins in other CSS systems). batch comes in handy for this!

Create a style from multiple other styles.

underlineOnHover =
    batch
        [ textDecoration none


        , hover
            [ textDecoration underline ]
        ]


css
    [ color (rgb 128 64 32)
    , underlineOnHover
    ]

...has the same result as:

css
    [ color (rgb 128 64 32)
    , textDecoration none
    , hover
        [ textDecoration underline ]
    ]

Define a custom property.

css [ property "-webkit-font-smoothing" "none" ]

...outputs

-webkit-font-smoothing: none;

Transforms the given property by adding !important to the end of its declaration.

Define a custom pseudo-class.

This can be useful for deprecated pseudo-classes such as -moz-any-link, which has been deprecated and removed in modern browsers.

button
    [ css [ pseudoClass "-moz-any-link" [ color (hex "f00") ] ] ]
    [ text "Whee!" ]

...outputs

<button class="f9fcb2">Whee!</button>


<style>
    .f9fcb2:-moz-any-link {
        color: #f00;
    }
</style>

An :active pseudo-class.

button [ active [ color (rgb 12 160 190) ] ]

A :checked pseudo-class.

This pseudo-class is for any checkbox, option or radio input that is checked or toggled on.

checked
    [ backgroundColor (rgb 0 0 255)
    ]

A :default pseudo-class.

default [ color (hex "#ff0000") ]

A :defined pseudo-class.

defined [ fontStyle italic ]

A :disabled pseudo-class.

button [ disabled [ color (rgb 194 194 194) ] ]

An :empty pseudo-class.

empty
    [ backgroundColor (rgb 20 20 20)
    ]

An :enabled pseudo-class.

enabled
    [ borderColor (rgba 150 150 0 0.5)
    ]

A :first pseudo-class.

first
    [ marginTop (pct 30)
    ]

A :first-of-type pseudo-class.

firstChild
    [ fontWeight bold
    ]

A :first-of-type pseudo-class.

firstOfType
    [ color (rgb 255 0 0)
    ]

A :focus pseudo-class.

focus
    [ border3 (px 2) solid (rgb 0 0 0)
    ]

A :fullscreen pseudo-class.

fullscreen
    [ backgroundColor (rgb 0 0 0)
    ]

A :hover pseudo-class.

hover
    [ fontWeight bold
    , color (rgb 255 50 0)
    ]

An :in-range pseudo-class.

inRange
    [ backgroundColor (rgb 0 255 0)
    ]

An :indeterminate pseudo-class.

indeterminate
    [ backgroundColor (rgb 100 100 100)
    ]

An :invalid pseudo-class.

invalid
    [ color (rgb 255 0 0)
    , fontWeight bold
    ]

A :last-child pseudo-class.

lastChild
    [ backgroundColor (rgb 0 0 255)
    ]

A :last-of-type pseudo-class.

lastOfType
    [ color (rgb 100 100 100)
    ]

A :left pseudo-class.

leftHandPage
    [ color (rgb 100 100 100)
    ]

Note: This is called leftHandPage instead of left or left_ is because both of those are taken by property and value keyword functions.

A :link pseudo-class.

link
    [ color (rgb 0 0 255)
    ]

An :only-child pseudo-class.

onlyChild
    [ backgroundColor (rgb 255 255 255)
    ]

An :only-of-type pseudo-class.

onlyOfType
    [ color (rgb 255 0 0)
    , fontStyle italic
    ]

An :out-of-range pseudo-class.

outOfRange
    [ color (rgb 255 0 0)
    ]

A :read-only pseudo-class.

readOnly
    [ color (rgb 50 50 50)
    ]

A :read-write pseudo-class.

readWrite
    [ backgroundColor (rgb 0 50 150)
    ]

A :required pseudo-class.

required
    [ border (px 2) solid (rgb 100 100 100)
    ]

A :right pseudo-class.

rightHandPage
    [ color (rgb 100 100 100)
    ]

Note: This is called rightHandPage instead of right or right_ is because both of those are taken by property and value keyword functions.

A :root pseudo-class.

root
    [ backgroundColor (rgb 0 200 200)
    ]

A :scope pseudo-class.

scope
    [ backgroundColor (rgb 0 200 200)
    ]

A :target pseudo-class.

target
    [ fontWeight bold
    , border3 (px 2) dotted (rgb 255 0 0)
    ]

A :valid pseudo-class.

valid
    [ border3 (px 1) solid (rgb 0 255 0)
    ]

A :visited pseudo-class.

visited
    [ color (rgb 150 0 255)
    ]

A :dir() pseudo-class.

dir rtl
    [ backgroundColor (hex "#ff0000")
    ]

A :lang() pseudo-class.

lang "en-GB"
    [ backgroundColor (hex "#ff0000")
    ]

A :not() pseudo-class.

The first argument is a list of selectors to not select.

not ["p.notthis", ".notthat"]
    [ backgroundColor (hex "#ff0000")
    ]

An :nth-child() pseudo-class.

nthChild "3"
    [ backgroundColor (hex "#ff0000")
    ]

An :nth-last-child() pseudo-class.

This is the same as nthChild, but counting from the end rather than the start.

nthLastChild "3n+4"
    [ backgroundColor (hex "#ff0000")
    ]

An :nth-of-type() pseudo-class.

nthOfType "odd"
    [ backgroundColor (hex "#ff0000")
    ]

An :nth-last-of-type() pseudo-class.

nthLastOfType "0n+1"
    [ backgroundColor (hex "#ff0000")
    ]

Define a custom pseudo-element.

textarea
    [ css [ pseudoElement "-webkit-scrollbar" [ display none ] ] ]
    []

...outputs

<textarea class="d84ff7"></textarea>


<style>
    .d84ff7::-webkit-scrollbar {
        display: none;
    }
</style>

An ::after pseudo-element.

div [ after [ content "hi!" ] ]

--TODO : Introduce a way to do content - lots of options there, not just text. Also it's overloaded with flexBasis content.

A ::backdrop pseudo-element.

backdrop
    [ background (rgba 255 0 0 0.25)
    ]

A ::before pseudo-element.

div [ before [ content "hi!" ] ]

--TODO : Introduce a way to do content - lots of options there, not just text. Also it's overloaded with flexBasis content.

A ::cue pseudo-element.

cue
    [ color (rgba 255 255 0 1)
    , fontWeight (int 600)
    ]

A ::first-letter pseudo-element.

firstLetter
    [ fontSize (rem 2)
    ]

A ::first-line pseudo-element.

firstLine
    [ fontWeight (int 600)
    ]

A ::marker pseudo-element.

marker
    [ color (rgba 255 255 0 1)
    , fontWeight (int 600)
    ]

A ::placeholder pseudo-element.

Be careful when using placeholders as they can negatively impact accessibility.

placeholder
    [ opacity (num 1) <| important
    , color (rgb 90 90 90)
    , fontWeight (int 400)
    ]

]

A ::selection pseudo-element.

selection
    [ backgroundColor (rgb 200 140 15)
    ]

A ::slotted() pseudo-element.

slotted "*"
    [ backgroundColor (rgb 200 140 15)
    ]

A type alias used to accept a length.

A type alias used to accept a length among other values.

Compiles to a 0 value with no units.

css [ padding zero ]

...compiles to:

padding: 0;

This conveniently lets you avoid doing things like padding (px 0)

px length units.

borderWidth (px 5)

em length units.

borderWidth (em 5)

ex length units.

borderWidth (ex 5)

ch length units.

borderWidth (ch 5)

rem length units.

borderWidth (rem 5)

vh length units.

borderWidth (vh 5)

vw length units.

borderWidth (vw 5)

vmin length units.

borderWidth (vmin 5)

vmax length units.

borderWidth (vmax 5)

mm length units.

borderWidth (mm 5)

cm length units.

borderWidth (cm 5)

Q length units.

borderWidth (q 2.5)

in length units.

borderWidth (inch 5)

(This is inch instead of in because in is a reserved keyword in Elm.)

pt length units.

borderWidth (pt 5)

pc length units.

borderWidth (pc 5)

pct length units.

borderWidth (pct 5)

A unitless number. Useful with properties like flexGrow, and order which accept unitless numbers.

flexGrow (num 2)


order (num -2)

A unitless integer. Useful with properties like zIndex which accept unitless integers.

zIndex (int 3)

A type alias used to accept an angle.

A type alias used to accept an angle among other values.

A type alias used to accept a 'width'.

A type alias used to accept a 'width' among other values.

A deg angle

deg 360 -- one full circle


deg 14.23

A grad angle

grad 400 -- one full circle


grad 38.8

A rad angle

rad 6.2832 -- approximately one full circle


rad 1

A turn angle

turn 1 -- one full circle


turn 0.25

A type alias used to accept an time.

A type alias used to accept an time among other values.

The s time unit.

animationDuration (s 1)

The ms time unit.

animationDuration (ms 120)

fr flex units.

gridAutoColumns (fr 1)

The minmax() value for grid properties.

gridAutoRows (minmax (px 2) (pct 100))

The fit-content() value that can have a length or percentage value that you want the property to be clamped to.

Not to be confused with the fitContent value for flex properties.

gridAutoColumns (fitContentTo (pct 100))


height (fitContentTo (rem 20))

Produces an custom-ident value used by properties such as (but not limited to) listStyle and listStyleType.

listStyleType (customIdent "hello-world")

Note: This method does not do any checking if the identifierer supplied is valid.

Produces a string value used by properties such as:

• listStyle

• listStyleType

• quotes2

• fontLanguageOverride

listStyleType (string "> ")

quotes2 (string "«") (string "»")

fontLanguageOverride (string "ENG")

The url value for the cursor, fill, strokeImage, and backgroundImage properties.

A type alias used to accept a color.

A type alias used to accept a color among other values.

[RGB color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()) in hexadecimal notation.

You can optionally include # as the first character, for benefits like syntax highlighting in editors, ease of copy/pasting from tools which express these as e.g. #abcdef0, etc.

color (hex "#60b5cc")


color (hex "60b5cc")

[RGB color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()) in functional notation.

color (rgb 96 181 204)

RGBA color value.

color (rgba 96 181 204 0.25)

HSL color value.

The s and l values are expressed as a number between 0 and 1 and are converted to the appropriate percentage.

color (hsl 193 0.51 0.59) -- hsl(193, 51%, 59%)

HSLA color value

The s and l values are expressed as a number between 0 and 1 and are converted to the appropriate percentage.

color (hsla 193 0.51 0.59 0.25) -- hsl(193, 51%, 59%, 0.25)

The currentcolor value used by properties such as color, backgroundColor

color currentcolor

A type alias used to accept an image.

A type alias used to accept an image among other values.

A type alias used to accept a basic shape.

A type alias used to accept a basic shape among other values.

Provides a one-argument inset() value. (Which creates an inset rectangle shape.)

clipPath <| insetRect (px 20) Nothing, "inset(20px)" )


clipPath <| insetRect (px 20) (Just <| insetRound (px 2))


clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))


clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))


clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing


clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))


clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))

Note: This is called insetRect instead of inset because inset and inset_ are already property and value functions handling other areas of CSS.

Provides a 2-argument inset() value. (Which creates an inset rectangle shape.)

clipPath <| insetRect (px 20) Nothing, "inset(20px)" )


clipPath <| insetRect (px 20) (Just <| insetRound (px 2))


clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))


clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))


clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing


clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))


clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))

Note: This is called insetRect2 instead of inset2 because inset and inset_ are already property and value functions handling other areas of CSS.

Provides a 2-argument inset() value. (Which creates an inset rectangle shape.)

clipPath <| insetRect (px 20) Nothing, "inset(20px)" )


clipPath <| insetRect (px 20) (Just <| insetRound (px 2))


clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))


clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))


clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing


clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))


clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))

Note: This is called insetRect3 instead of inset3 because inset and inset_ are already property and value functions handling other areas of CSS.

Provides a 2-argument inset() value. (Which creates an inset rectangle shape.)

clipPath <| insetRect (px 20) Nothing, "inset(20px)" )


clipPath <| insetRect (px 20) (Just <| insetRound (px 2))


clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))


clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))


clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing


clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))


clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))

Note: This is called insetRect4 instead of inset4 because inset and inset_ are already property and value functions handling other areas of CSS.

Provides a 1-value border radius for use with insetRect(#insetRect) (inset()).

insetRect (px 40) (Just <| insetRound (px 2))


insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))


insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))


insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))

Provides a 2-value border radius for use with insetRect(#insetRect) (inset()).

insetRect (px 40) (Just <| insetRound (px 2))


insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))


insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))


insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))

Provides a 3-value border radius for use with insetRect(#insetRect) (inset()).

insetRect (px 40) (Just <| insetRound (px 2))


insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))


insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))


insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))

Provides a 4-value border radius for use with insetRect(#insetRect) (inset()).

insetRect (px 40) (Just <| insetRound (px 2))


insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))


insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))


insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))

Provides a one-argument circle() value.

clipPath (circle (pct 10))


clipPath (circle closestSide)


clipPath (circleAt (pct 10) left)


clipPath (circleAt closestSide (rem 5))


clipPath (circleAt2 closestSide (rem 5) (rem 1))

Note: This is not to be confused with circle_, which is a keyword value for properties such as listStyleType.

Provides a 2-argument circle(<rad> at <pos>) value.

clipPath (circleAt (pct 10) left_)


clipPath (circleAt closestSide (rem 5))


clipPath (circleAt2 closestSide (rem 5) (rem 1))

Provides a 3-argument circle(<rad> at <posX> <posY>) value.

clipPath (circleAt2 closestSide (rem 5) (rem 1))


clipPath (circleAt2 (pct 10) top_ left_)

Provides a one-argument ellipse() value.

clipPath (ellipse (px 20) (px 10))


clipPath (ellipse closestSide farthestSide)


clipPath (ellipseAt closestSide (pct 10) left_)


clipPath (ellipseAt (pct 20) (pct 10) (rem 5))


clipPath (ellipseAt2 (rem 5) closestSide (rem 5) (rem 1))

Provides a 3-argument ellipse(<radiusX> <radiusY> at <pos>) value.

clipPath (ellipseAt (pct 50) (pct 10) left_)


clipPath (ellipseAt (rem 5) closestSide (rem 5))

Provides a 4-argument ellipse(<radiusX> <radiusY> at <posX> <posY>) value.

clipPath (ellipseAt2 (rem 6) closestSide (rem 5) (rem 1))


clipPath (ellipseAt2 farthestSide (pct 10) left_ top_)

The closest-side value for use in circle and ellipse shapes.

clipPath (circle closestSide)


clipPath (ellipse farthestSide (px 20))

The farthest-side value for use in circle and ellipse shapes.

clipPath (circleAt farthestSide (pct 20))


clipPath (ellipseAt farthestSide (px 2) (pct 20))

Creates a polygon() value for CSS properties that accept a <basic-shape> value.

Each numerical argument is a Float that represents a percentage.

clipPath <| polygon [ (20, 30), (40, 80.3), (14, 50) ]

Creates a path() value for CSS properties that accept a <basic-shape> value.

The input string needs to be a valid SVG path string.

clipPath <| path "M161.693,39.249C94.047,39.249 39.127,94.169 39.127,161.816C39.127,229.462 94.047,284.382 161.693,284.382C229.34,284.382 284.26,229.462 284.26,161.816C284.26,94.169 229.34,39.249 161.693,39.249ZM161.693,71.382C211.605,71.382 211.605,252.249 161.693,252.249C111.782,252.249 71.26,211.727 71.26,161.816C71.26,111.904 111.782,71.382 161.693,71.382Z"

A type alias used to accept a blend mode.

A type alias used to accept a blend mode among other values.

A type alias used to accept a filter function.

A type alias used to accept a filter function, among other values.

Provides a blur() filter function value.

backdropFilter <| blur (px 20)
-- backdrop-filter: blur(20px);

Provides a brightness() filter function value.

filter <| brightness (pct 20)
-- backdrop-filter: brightness(20%);


filter <| brightness zero -- completely black


backdropFilter <| contrast (num 1) -- no effect


filter <| brightness (num 0.4)

Provides a contrast() filter function value.

backdropFilter <| contrast (pct 20)
-- backdrop-filter: contrast(20%);


backdropFilter <| contrast zero -- completely gray


backdropFilter <| contrast (num 1) -- no effect


backdropFilter <| contrast (num 0.4)

Provides a drop-shadow() filter function value.

filter <| dropShadow (px 20) (px 3) (Just <| px 30) (Just <| hex "#fff")
-- filter: drop-shadow(20px 4px 30px #fff);

Provides a grayscale() filter function value.

backdropFilter <| grayscale (pct 20)
-- backdrop-filter: grayscale(20%);


backdropFilter <| grayscale zero -- no effect


backdropFilter <| grayscale (num 1) -- completely grayscale


backdropFilter <| grayscale (num 0.4) -- 40% grayscale

Provides a hue-rotate() filter function value.

backdropFilter <| hueRotate (deg -180)
-- backdrop-filter: hue-rotate(-180deg);

Provides a invert() filter function value.

backdropFilter <| invert (pct 20)
-- backdrop-filter: invert(20%);


backdropFilter <| invert zero -- no effect


backdropFilter <| invert (num 1) -- completely inverted


backdropFilter <| invert (num 0.4) -- 40% inversion

Provides a opacity() filter function value.

backdropFilter <| opacity_ (pct 20)
-- backdrop-filter: opacity(20%);


backdropFilter <| opacity_ zero -- completely transparent


backdropFilter <| opacity_ (num 1) -- no effect


backdropFilter <| opacity_ (num 0.4) -- 40% transparent

Note: This is called opacity_ instead of opacity because opacity is already used as a property function.

Provides a saturate() filter function value.

filter <| saturate (pct 20)
-- filter: saturate(20%);


filter <| saturate zero -- completely desaturated


filter <| saturate (num 1) -- no effect


filter <| saturate (num 2) -- double saturation


filter <| saturate (num 0.4) -- 40% saturated

Provides a sepia() filter function value.

filter <| sepia (pct 20)
-- filter: sepia(20%);


filter <| sepia zero -- no effect


filter <| sepia (num 1) -- completely sepia


filter <| sepia (num 0.4) -- 40% sepia

A type alias used to accept a line-style. This includes hidden as a possible value.

A type alias used to accept a line-style (without the hidden) value among other values.

A type alias used to accept a line-width.

A type alias used to accept a line-width among other values.

The css calc function.

almostPct100 =
    calc (pct 100) (minus (px 2))


-- The following compiles to: calc(100vh - (2px + 2rem))
screenMinusBorderAndFooter =
    calc (vh 100) (minus (calc (px 2) (plus (rem 2))))


myWidth =
    width almostPct100


myHeight =
    height screenMinusBorderAndFooter

CAUTION: calc can easily be used to create invalid CSS values! For example, zIndex (calc (pct 100) (minus (px 5))) compiles to z-index: calc(100% - 5px); which is invalid. According to the spec, calc may return values that have no relation to its arguments, so unfortunately there's not much elm-css can do to make calc more reliable. Use with caution!

Either plus or minus.

See calc for how to use this.

Use with calc to subtract one value from another.

calc (pct 100) (minus (px 2))
-- calc: (100% - 2px)

Use with calc to add one numeric value to another.

calc (pct 100) (plus (px 2))
-- calc: (100% + 2px)

Use with calc to multiply a value by a unitless number.

calc (pct 100) (times (int 2))
-- calc: (100% * 2px)

Use with calc to divide a value by a unitless number.

calc (pct 100) (dividedBy (int 2))
-- calc: (100% / 2px)

A type that is used in properties for CSS wide values. See CSS-wide values.

The unset value. Any CSS property can be set to this value.

display unset


borderStyle unset

The initial value. Any CSS property can be set to this value.

display initial


borderStyle initial

The inherit value. Any CSS property can be set to this value.

display inherit

The revert value. Any CSS property can be set to this value.

all revert


color revert

The auto value used in many properties such as (but not limited to) width, zoom, outlineStyle, and flexBasis.

width auto


zoom auto


flexBasis auto

The none value used in many properties such as (but not limited to) display, borderStyle, maxWidth, clear, strokeDashJustify, and flex.

display none


borderStyle none


strokeDashJustify none


flex none

The left value, used in many properties such as:

• backgroundPosition
• clear
• float
• justifyContent
• justifyItems
• justifySelf
• pageBreakAfter
• textAlign

backgroundPosition left_

clear left_

float left_

justifyContent left_

justifyItems left_

justifySelf left_

pageBreakAfter left_

textAlign left_

The value is called left_ instead of left because left is already a property function.

The right value, used in many properties such as:

• backgroundPosition
• clear
• float
• justifyContent
• justifyItems
• justifySelf
• pageBreakAfter
• textAlign

backgroundPosition right_

clear right_

float right_

justifyContent right_

justifyItems right_

justifySelf right_

pageBreakAfter right_

textAlign right_

The value is called right_ instead of right because right is already a property function.

The top value, used in the following properties:

• backgroundPosition
• captionSide
• objectPosition2
• perspectiveOrigin2
• strokePosition2
• transformOrigin
• verticalAlign

backgroundPosition top_

captionSide top_

objectPosition2 right_ top_

perspectiveOrigin2 left_ top_

transformOrigin top_

verticalAlign top_

The value is called top_ instead of top because top is already a property function.

The bottom value, used in the following properties:

• backgroundPosition
• captionSide
• objectPosition2
• perspectiveOrigin2
• strokePosition2
• transformOrigin
• verticalAlign

backgroundPosition bottom_

captionSide bottom_

objectPosition2 right_ bottom_

perspectiveOrigin2 left_ bottom_

transformOrigin bottom_

verticalAlign bottom_

The value is called bottom_ instead of bottom because bottom is already a property function.

The block value.

This is a CSS Logical value used by display and resize.

display block


resize block

The inline value.

This is a CSS Logical value used by display and resize.

display inline


resize inline

The start value.

It's used in the following properties as a CSS Logical value:

• alignItems
• alignContent
• alignSelf
• justifyContent
• justifyItems
• justifySelf

alignContent start

justifyItems start

It's also used as an animation keyword used in steps2.

steps2 3 start

The end value.

It's used in the following properties as a CSS Logical value:

• alignItems
• alignContent
• alignSelf
• justifyContent
• justifyItems
• justifySelf

alignContent end

justifyItems end

It's also used as an animation keyword used in steps2.

steps2 3 end

The block-start value, which is a CSS Logical value. It can be used with captionSide.

captionSide blockStart

The block-end value, which is a CSS Logical value. It can be used with captionSide.

captionSide blockEnd

Sets inline-start, which is a CSS Logical value. It can be used with the following properties:

• captionSide
• clear
• float

    clear inlineStart

    captionSide inlineStart

    float inlineStart

Sets inline-end, which is a CSS Logical value. It can be used with the following properties:

• captionSide
• clear
• float

    clear inlineEnd

    captionSide inlineEnd

    float inlineEnd

The min-content value used for properties such as:

• sizing (eg. width, height, inlineSize)

• min/max sizing (eg. minWidth, maxBlockWidth)

• flexBasis

width minContent

The max-content value used for properties such as:

• sizing (eg. width, height, inlineSize)

• min/max sizing (eg. minWidth, maxBlockWidth)

• flexBasis

width maxContent

The fit-content value used for properties such as:

• sizing (eg. width, height, inlineSize)

• min/max sizing (eg. minWidth, maxBlockWidth)

• flexBasis

width fitContent

Sets x value for usage with scrollSnapType2 and rotate2.

scrollSnapType2 x mandatory


rotate x (deg 10)

Sets y value for usage with scrollSnapType2 and rotate2.

scrollSnapType2 y mandatory


rotate y (deg 50)

Sets z value for usage with rotate2.

rotate z (deg 100)

The stretch value used in the following properties:

• alignContent
• alignItems
• alignSelf
• justifyContent
• justifyItems
• justifySelf
• strokeDashJustify

alignContent stretch

strokeDashJustify stretch

The center value, used in many properties such as:

• alignContent
• alignItems
• alignSelf
• backgroundPosition
• justifyContent
• justifyItems
• justifySelf
• scrollSnapAlign

backgroundPosition enter

justifyContent center

The margin-box value, used in clipPath.

clipPath marginBox

The border-box value, used in the following properties:

• boxSizing
• backgroundClip
• backgroundOrigin
• strokeOrigin

boxSizing borderBox

backgroundClip borderBox

backgroundOrigin borderBox

strokeOrigin borderBox

The padding-box value, used with backgroundClip, backgroundOrigin, and strokeOrigin.

backgroundClip paddingBox


backgroundOrigin paddingBox


strokeOrigin paddingBox

The content-box value, used in the following properties:

• boxSizing
• backgroundClip
• backgroundOrigin
• strokeOrigin

boxSizing contentBox

backgroundClip contentBox

backgroundOrigin contentBox

strokeOrigin contentBox

The fill-box value used by strokeOrigin and transformBox.

strokeOrigin fillBox


transformBox fillBox

The stroke-box value used by strokeOrigin and transformBox.

strokeOrigin strokeBoxx


transformBox strokeBox

The view-box value used by transformBox.

transformBox viewBox

The baseline value, used in the following properties:

• alignContent
• alignItems
• alignSelf
• verticalAlign

alignItems baseline

verticalAlign baseline

A sub value for the following properties:

• fontVariantPosition
• verticalAlign

    fontVariantPosition sub

    verticalAlign sub

A super value for the following properties:

• fontVariantPosition
• verticalAlign

    fontVariantPosition super

    verticalAlign super

The ruby value used by display and fontVariantEastAsian.

display ruby


fontVariantEastAsian2 ruby jis83

A full-width value for:

textTransform

Forces the writing of characters in a square so they can be aligned in East Asian scripts.

fontVariantEastAsian

Activates the East Asian characters that are roughly be the same width.

textTransform fullWidth


fontVariantEastAsian fullWidth

A under value for the textUnderlinePosition property and the textEmphasisPosition2 property.

textUnderlinePosition under


textEmphasisPosition2 under left_

The circle value used by properties such as listStyle, listStyleType, textEmphasis and textEmphasisStyle.

listStyleType circle_


textEmphasis2 circle_ (hex "ff0000")


textEmphasisStyle circle_

Note: This is not to be confused with circle, circleAt or circleAt2, which are <basic-shape> data types.

The hidden value used for properties such as visibility, overflow and borderStyle.

visibility hidden


overflow hidden


borderStyle hidden

The visible value used for properties such as visibility, overflow and pointer-events.

visibility visible


overflow visible


pointerEvents visible

The thin value used by various properties.

In borderWidth and columnRuleWidth, the value is equivalent to 1px.

borderWidth thin


columnRuleWidth thin

It's also used in scrollbarWidth.

scrollbarWidth thin

The thick value used by properties such as borderWidth, and columnRuleWidth.

borderWidth thick


columnRuleWidth thick

The value is equivalent of 5px.

The normal value, which can be used with such properties as:

• fontVariantCaps
• fontKerning
• fontLanguageOverride
• whiteSpace
• wordBreak
• columnGap
• zoom
• animationDirection
• alignItems
• lineBreak

alignItems normal

columnGap normal

fontVariantCaps normal

whiteSpace normal

wordBreak normal

zoom normal

Sets strict value for usage with lineBreak and contain.

contain strict


lineBreak strict

The all value used in properties such as columnSpan and pointerEvents.

columnSpan all_


pointerEvents all_

This value function has an underscore because all is already a property function.

Sets both value for usage with clear and resize.

  clear both


  resize both

Sets always value for usage with scrollSnapStop, pageBreakBefore, and pageBreakAfter.

scrollSnapStop always


pageBreakBefore always


pageBreakAfter always

The scroll value used for properties such as overflow and background-attachment.

overflow scroll


backgroundAttachment scroll

The column value, used in flex-direction, break-before and break-after properties.

flexDirection column


breakBefore column


breakAfter column

The content value used in the following properties:

• flex
• flex-basis
• contain

flexBasis content

contain content

The fill value used in properties such as objectFit, pointerEvents, paintOrder and maskBorderSlice.

objectFit fill_


pointerEvents fill_


paintOrder2 fill_ markers


maskBorderSlice4 fill_ (num 20) (pct 10) (num 45)

The value is called fill_ instead of fill because fill is already a property function.

The stroke value used by pointerEvents and paintOrder.

pointerEvents stroke


paintOrder2 stroke markers

The text value for the cursor, backgroundClip, and user-select properties.

backgroundClip text


cursor text


userSelect text

Sets the style value for:

• contain. (This value is considered at-risk from being depreciated for this property.)
• fontSynthesis

    contain style

    fontSynthesis style

The clip value used by overflow and textOverflow.

overflow clip


overflowX clip


overflowY clip


textOverflow clip

Sets cover for the following properties:

• backgroundSize
• objectFit
• strokeDashCorner
• strokeSize

backgroundSize cover

strokeSize cover

Sets contain for the following properties:

• backgroundSize (It always show the whole background image, even if it leaves empty spaces on the sides.)
• objectFit (Replaced content is scaled to maintain proportions within the element's content box.)
• userSelect (Lets selection start within the element but that selection will be contained within that element's bounds.)
• overscrollBehavior (This means that default scroll overflow behavior is observed inside the element, but scroll chaining will not happen to neighbouring elements.)

backgroundSize contain_

overscrollBehavior contain_

The value is called contain_ instead of contain because contain is already a property function.

The repeat value for background properties and strokeRepeat.

backgroundRepeat repeat


strokeRepeat repeat

The no-repeat value for background properties and strokeRepeat.

backgroundRepeat noRepeat


strokeRpeat noRepeat

The repeat-x value for repeating backgrounds and strokeRepeat.

backgroundRepeat repeatX


strokeRepeat repeatX

The repeat-y value for repeating backgrounds and strokeRepeat.

backgroundRepeat repeatY


strokeRepeat repeatY

The space value for repeating backgrounds and strokeRepeat.

backgroundRepeat space


strokeRepeat space

The round value used for properties such as:

• repeating backgrounds
• strokeLinecap
• strokeRepeat
• strokeLinejoin

This is called round_ because round is a function word used in Elm Core's Basics module.

    backgroundRepeat round_

    strokeLineCap round_

    strokeLinejoin2 miter round_

    strokeRepeat round_

Sets isolate value for usage with isolation, and unicodeBidi.

isolation isolate


unicodeBidi isolate

A match-parent value for the text-align, and strokeOrigin properties.

textAlign matchParent


strokeOrigin matchParent

A nowrap value for the white-space and flex-wrapproperties.

whiteSpace nowrap


flexWrap nowrap

Sets an all property.

all inherit

Sets display.

display block

Note: This function accepts flex_ and grid_ ather than flex and grid because flex and grid are already property functions.

Sets display.

display2 block flex_

Note: This function accepts flex_ and grid_ ather than flex and grid because flex and grid are already property functions.

For display: inline list-item and similar property values that include list-item look at displayListItem2 and displayListItem3.

The display property. This function is used to generate complex display: list-item properties such as display: block list-item.

displayListItem2 block

The display property. This function is used to generate complex display: list-item properties such as display: block flow-root list-item.

displayListItem3 block flowRoot

The flex value used by display.

display flex_

The value is called flex_ instead of flex because flex is already a property function.

The flow value used by display.

display flow

The flow-root value used by display.

display flowRoot

The grid value used by display.

The value is called grid_ instead of grid because grid is already a property function.

display grid_

The contents value used by display.

display contents

The list-item value used by display.

display listItem

The inline-block value used by display.

display inlineBlock

The inline-flex value used by display.

display inlineFlex

The inline-table value used by display.

display inlineTable

The inline-grid value used by display.

display inlineGrid

The ruby-base value used by display.

display rubyBase

The ruby-base-container value used by display.

display rubyBaseContainer

The ruby-text value used by display.

display rubyText

The ruby-text-container value used by display.

display rubyTextContainer

The run-in value used by display.

display runIn

The table value used by display.

display table

The table-caption value used by display.

display tableCaption

The table-cell value used by display.

display tableCell

The table-column value used by display.

display tableColumn

The table-column-group value used by display.

display tableColumnGroup

The table-footer-group value used by display.

display tableFooterGroup

The table-header-group value used by display.

display tableHeaderGroup

The table-row value used by display.

display tableRow

The table-row-group value used by display.

display tableRowGroup

Sets the position of an element.

position absolute


position relative

An absolute position.

position absolute

The default position value is static. See also position: sticky, and [the differences between absolute, relative, and fixed positioning](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

A fixed position or fixed background-attachment or fixed table-layout.

position fixed


backgroundAttachment fixed


tableLayout fixed

The default position value is static. See also position: sticky, and the differences between absolute, relative, and fixed positioning

A relative position.

position relative

The default position value is static. See also position: sticky, and the differences between absolute, relative, and fixed positioning.

A static position.

position static

This is the default position value. See also position: sticky, and the differences between absolute, relative, and fixed positioning.

A sticky position

position sticky

The default position value is static. See also the differences between absolute, relative, and fixed positioning.

Sets z-index

zIndex (int 10)


zIndex auto

NOTE: Z-index is not as simple as it looks! Make sure to read about stacking contexts if you're not already familiar with them.

Sets isolation

isolation auto


isolation isolate

Sets box-sizing property.

boxSizing contentBox


boxSizing borderBox

The contain property.

contain none


contain content


contain2 size layout


contain3 size layout style


contain4 -- all multiple choice values in use, no value entry needed

The contain property.

This two-argument version lets you use 2 of the 4 multiple choice values you can use for this property.

contain2 size layout

The contain property.

This two-argument version lets you use 3 of the 4 multiple choice values you can use for this property.

contain3 size layout style

The contain property.

This 4-argument version lets you use all 4 multiple choice values you can use for this property.

contain4 size layout style paint

Note: The style value is considered at-risk from being depreciated.

Sets the size value for contain.

This indicates that the element can be sized without needing to look at the size of its descendants.

contain size

Sets the inline-size value for contain.

Indicates that inline size containment is applied to the element.

contain inlineSize_

Note: This is named inlineSize_ instead of inlineSize because it is already a property function.

Sets the layout value for contain.

This indicates that nothing outside the element may affect its internal layout and vice versa.

contain layout

Sets the paint value for contain.

Indicates that descendants of the element will not display outside its bounds and will not be painted by the browser if the containing box is offscreen.

contain paint

The contain-intrinsic-size property.

This 1-argument variant lets you use global values, none and lengths for width and height.

containIntrinsicSize revert


containIntrinsicSize none


                -- width + height
containIntrinsicSize (px 500)


                    -- width | height
containIntrinsicSize2 (rem 5) (px 800)


                -- width + height w/ auto
containIntrinsicSize2 auto (px 800)


                  -- width w/ auto | height w/ auto
containIntrinsicSize4 auto (rem 50) auto (px 250)

The contain-intrinsic-size property.

This 2-argument variant lets you use separate lengths for width and height or joined with and height with auto.

containIntrinsicSize revert


containIntrinsicSize none


                -- width + height
containIntrinsicSize (px 500)


                    -- width | height
containIntrinsicSize2 (rem 5) (px 800)


                -- width + height w/ auto
containIntrinsicSize2 auto (px 800)


                  -- width w/ auto | height w/ auto
containIntrinsicSize4 auto (rem 50) auto (px 250)

The contain-intrinsic-size property.

This 4-argument variant lets you use separate lengths for width and height with auto.

Note: The 1st and 3rd argument can only be auto.

containIntrinsicSize revert


containIntrinsicSize none


                -- width + height
containIntrinsicSize (px 500)


                    -- width | height
containIntrinsicSize2 (rem 5) (px 800)


                -- width + height w/ auto
containIntrinsicSize2 auto (px 800)


                  -- width w/ auto | height w/ auto
containIntrinsicSize4 auto (rem 50) auto (px 250)

The contain-intrinsic-width property.

This 1-argument variant lets you use global values, none and lengths.

containIntrinsicWidth revert


containIntrinsicWidth none


                 -- specified width
containIntrinsicWidth (px 500)


                 -- specified width w/ auto
containIntrinsicWidth2 auto (px 800)

The contain-intrinsic-width property.

This 2-argument variant lets you use lengths with auto.

Note: The 1st argument can only be auto.

containIntrinsicWidth revert


containIntrinsicWidth none


                 -- specified width
containIntrinsicWidth (px 500)


                 -- specified width w/ auto
containIntrinsicWidth2 auto (px 800)

The contain-intrinsic-height property.

This 1-argument variant lets you use global values, none and lengths.

containIntrinsicHeight revert


containIntrinsicHeight none


                 -- specified height
containIntrinsicHeight (px 500)


                 -- specified height w/ auto
containIntrinsicHeight2 auto (px 800)

The contain-intrinsic-height property.

This 2-argument variant lets you use lengths with auto.

Note: The 1st argument can only be auto.

containIntrinsicHeight revert


containIntrinsicHeight none


                 -- specified height
containIntrinsicHeight (px 500)


                 -- specified height w/ auto
containIntrinsicHeight2 auto (px 800)

The contain-intrinsic-inline-size property.

This 1-argument variant lets you use global values, none and lengths.

containIntrinsicInlineSize revert


containIntrinsicInlineSize none


            -- specified inline size
containIntrinsicInlineSize (px 500)


            -- specified inline size w/ auto
containIntrinsicInlineSize2 auto (px 800)

The contain-intrinsic-inline-size property.

This 2-argument variant lets you use lengths with auto.

Note: The 1st argument can only be auto.

containIntrinsicInlineSize revert


containIntrinsicInlineSize none


            -- specified inline size
containIntrinsicInlineSize (px 500)


            -- specified inline size w/ auto
containIntrinsicInlineSize2 auto (px 800)

The contain-intrinsic-block-size property.

This 1-argument variant lets you use global values, none and lengths.

containIntrinsicBlockSize revert


containIntrinsicBlockSize none


            -- specified block size
containIntrinsicBlockSize (px 500)


            -- specified block size w/ auto
containIntrinsicBlockSize2 auto (px 800)

The contain-intrinsic-block-size property.

This 2-argument variant lets you use lengths with auto.

Note: The 1st argument can only be auto.

containIntrinsicBlockSize revert


containIntrinsicBlockSize none


            -- specified block size
containIntrinsicBlockSize (px 500)


            -- specified block size w/ auto
containIntrinsicBlockSize2 auto (px 800)

The width property.

width (px 150)


width (em 1.5)


width auto


width minContent

The min-width property.

minWidth (px 150)


minWidth (em 1.5)


minWidth auto

The max-width property.

maxWidth (px 150)


maxWidth (em 1.5)


maxWidth auto

The height property.

height (px 34)

The min-height property.

minHeight (px 20)

The max-height property.

maxHeight (px 20)

The block-size property.

blockSize (px 20)

The min-block-size property.

minBlockSize (px 20)

The max-block-size property.

maxBlockSize (px 20)

The inline-size property.

inlineSize (px 20)

The min-inline-size property.

minInlineSize (px 20)

The max-inline-size property.

maxInlineSize (px 20)

Sets the inset property.

inset sets the top, bottom, left and right properties.

inset (px 10) -- top, bottom, left and right are all 10px.


inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%


inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px


inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px

Sets the inset property.

inset sets the top, bottom, left and right properties.

inset (px 10) -- top, bottom, left and right are all 10px.


inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%


inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px


inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px

Sets the inset property.

inset sets the top, bottom, left and right properties.

inset (px 10) -- top, bottom, left and right are all 10px.


inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%


inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px


inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px

Sets the inset property.

inset sets the top, bottom, left and right properties.

inset (px 10) -- top, bottom, left and right are all 10px.


inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%


inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px


inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px

Sets the top property.

top (px 10)


top (pct 50)


top auto


top zero

If you need to use top as a CSS value instead of as a property, for example in vertical-align: top, use top_ instead of this.

Sets the right property.

right (px 10)


right (pct 50)


right auto


right zero

If you need to use right as a CSS value instead of as a property, for example in float: right, use right_ instead of this.

Sets the bottom property.

bottom (px 10)


bottom (pct 50)


bottom auto


bottom zero

If you need to use bottom as a CSS value instead of as a property, for example in vertical-align: bottom, use bottom_ instead of this.

Sets the left property.

left (px 10)


left (pct 50)


left auto


left zero

If you need to use left as a CSS value instead of as a property, for example in float: left, use left_ instead of this.

Sets the inset-block property.

inset-block sets the inset-block-start and inset-block-end properties.

insetBlock (px 10) -- block start and block end are both 10px.


insetBlock2 (pct 5) (pct 5) -- block start = 5%, block end = 5%

Sets the inset-block property.

inset-block sets the inset-block-start and inset-block-end properties.

insetBlock (px 10) -- block start and block end are both 10px.


insetBlock2 (pct 5) (pct 5) -- block start = 5%, block end = 5%

Sets the inset-inline property.

inset-inline sets the inset-inline-start and inset-inline-end properties.

insetInline (px 10) -- inline start and inline end are both 10px.


insetInline2 (pct 5) (pct 5) -- inline start = 5%, inline end = 5%

Sets the inset-inline property.

inset-inline sets the inset-inline-start and inset-inline-end properties.

insetInline (px 10) -- inline start and inline end are both 10px.


insetInline2 (pct 5) (pct 5) -- inline start = 5%, inline end = 5%

Sets the inset-block-start property.

insetBlockStart (px 10)


insetBlockStart (pct 50)


insetBlockStart auto


insetBlockStart zero

Sets the inset-block-end property.

insetBlockEnd (px 10)


insetBlockEnd (pct 50)


insetBlockEnd auto


insetBlockEnd zero

Sets the inset-inline-start property.

insetInlineStart (px 10)


insetInlineStart (pct 50)


insetInlineStart auto


insetInlineStart zero

Sets the inset-inline-end property.

insetInlineEnd (px 10)


insetInlineEnd (pct 50)


insetInlineEnd auto


insetInlineEnd zero

Sets margin property. The margin property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in a single declaration.

If there is only one argument value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

margin (em 4) -- set all margins to 4em


margin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px


margin3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px


margin4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px

You may want to check out this article on collapsing margins!

Sets margin property. The margin2 property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in a single declaration.

The top and bottom margins are set to the first value and the right and left margins are set to the second.

margin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px

You may want to check out this article on collapsing margins!

Sets margin property. The margin3 property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in a single declaration.

The top margin is set to the first value, the left and right are set to the second, and the bottom is set to the third.

margin3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px

You may want to check out this article on collapsing margins!

Sets margin property. The margin4 property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in a single declaration.

The four values apply to the top, right, bottom, and left margins.

margin4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px

You may want to check out this article on collapsing margins!

Sets margin-top property.

marginTop (px 4)

This article on margin-top versus margin-bottom may be useful.

Sets margin-right property.

marginRight (px 4)

Sets margin-bottom property.

marginBottom (px 4)

This article on margin-top versus margin-bottom may be useful.

Sets margin-left property.

marginLeft (px 4)

Sets margin-block property. The margin-block property is a shorthand property for setting margin-block-start and margin-block-end in a single declaration.