CSS Property Reference

layout

These properties all relate to an element's layout and sizing.

layout-alignment

The alignment related properties can be used to control the alignment for elements that combine multiple items into a single element, such as a checkbox that contains a check mark (usually referred to as indicator), an icon and a label. For details about how the layout for elements works, see layout.

Horizontal and vertical alignment is specified in relative terms that do not imply a writing direction.

layout-alignment (<container> <horizontal> <vertical> <order>)

Shorthand for setting the various layout properties.

layout-alignment-container (item | content | background)

The alignment container. This determines relative to what the element is placed.

layout-alignment-horizontal (start | center | end | fill | stack-center | stack-fill)

The horizontal alignment.

layout-alignment-vertical (start | center | end | fill | stack-center | stack-fill)

The vertical alignment.

layout-alignment-order (<integer>)

The order determines which elements come before others in the same alignment group.

width (<length>)

The implicit (initial) width of an element.

height (<length>)

The implicit (initial) height of an element.

spacing (<length>)

The spacing between various elements.

layout-padding

Padding defines extra spacing around the content of an element.

padding (<length>{1,4})

A shorthand to set all padding values in a single property. Can take one to four values. If one value is provided, it will be used for all four padding values. If two values are provided, the first will be used for left and right padding, the second for top and bottom padding. If three values are provided, the first will be used for top, the second for left and right and the third for bottom padding. If four values are provided, they are used for top, right, bottom, left padding in that order.

padding-left (<length>)

The size of the left side.

padding-right (<length>)

The size of the right side.

padding-top (<length>)

The size of the top side.

padding-bottom (<length>)

The size of the bottom side.

layout-inset

Inset defines extra spacing around the background of an element.

inset (<length>{1,4})

A shorthand to set all inset values in a single property. Can take one to four values. If one value is provided, it will be used for all four inset values. If two values are provided, the first will be used for left and right inset, the second for top and bottom inset. If three values are provided, the first will be used for top, the second for left and right and the third for bottom inset. If four values are provided, they are used for top, right, bottom, left inset in that order.

inset-left (<length>)

The size of the left side.

inset-right (<length>)

The size of the right side.

inset-top (<length>)

The size of the top side.

inset-bottom (<length>)

The size of the bottom side.

layout-margins

Margins define extra spacing between sub-elements of an element.

margin-left (<length>)

The size of the left side.

margin-right (<length>)

The size of the right side.

margin-top (<length>)

The size of the top side.

margin-bottom (<length>)

The size of the bottom side.

text

These properties all relate to the text of an element. They will have no effect if the element has no visible text.

color (<color>)

A shorthand to set both text and icon color in a single property.

font-size (<length> or <percentage>)

The size of the font.

font-weight (<integer> | (normal | bold | bolder | lighter))

The weight of the font. Can be either an integer in the range 100-1000 or a weight name.

text-alignment

The alignment of text of an element.

text-alignment-container (item | content | background)

The alignment container. This determines relative to what the element is placed.

text-alignment-horizontal (start | center | end | fill | stack-center | stack-fill)

The horizontal alignment.

text-alignment-vertical (start | center | end | fill | stack-center | stack-fill)

The vertical alignment.

text-alignment-order (<integer>)

The order determines which elements come before others in the same alignment group.

font-family (<string>)

text-color (<color>)

The color of text of an element.

text-wrap-mode (no-wrap | word-wrap | wrap-anywhere | wrap)

The wrap mode for the text of an element.

text-elide (none | left | middle | right)

The elide mode for the text of an element.

icon

These properties all relate to the icon of an element. They will have no effect if the element does not have an icon.

icon-size (<length>)

A shorthand to set both icon width and icon height in one property.

icon-alignment

icon-alignment-container (item | content | background)

The alignment container. This determines relative to what the element is placed.

icon-alignment-horizontal (start | center | end | fill | stack-center | stack-fill)

The horizontal alignment.

icon-alignment-vertical (start | center | end | fill | stack-center | stack-fill)

The vertical alignment.

icon-alignment-order (<integer>)

The order determines which elements come before others in the same alignment group.

icon-width (<length>)

The width of the icon.

icon-height (<length>)

The height of the icon.

icon-name (<string>)

The name of an icon of the icon theme to use for this icon.

icon-source (<url>)

A URL to a file to use for the icon. Currently only local files are supported.

icon-color (<color>)

The color of the icon.

background

The background properties all relate to the background of an element. An element's background is a layer rendered over any shadows but underneath everything else.

background (none | <color> | <url>)

A shorthand to set a background for an element. Setting this to "none" will explicitly disable any background. Setting this to a color value will use that color as background. Setting it to a url will use that as image source for the background.

background-color (<color>)

The background color to use for an element.

background-image

The image to use for an element.

background-image-width (<length>)

The width to use for the image. If unset, the source's image width is used.

background-image-height (<length>)

The height to use for the image. If unset, the source's image height is used.

background-image-x-offset (<length>)

An offset on placement of the image horizontally.

background-image-y-offset (<length>)

An offset on placement of the image vertically.

background-image-mask-color (<color>)

The color to use for rendering the image when the image is used as a mask.

border

The border properties all relate to an element's border. An element's border is a set of lines rendered inside the edge of an element, over any background but underneath any content. Borders have a width, a style and a color. Currently only the styles "none" and "solid" are supported, with "none" meaning do not draw the border and "solid" being use a solid color for the border.

border (none | (<length> (none | solid) <color>))

A shorthand to set all border properties in a single property. If set to none, all borders will be disabled. If set to <length> solid <color>, all borders will use <length> for their size and <color> for their color.

border-width (<length>)

A shorthand to set all border widths in a single property.

border-color (<color>)

A shorthand to set all border colors in a single property.

border-style (none | solid)

A shorthand to set all border styles in a single property.

border-left

{ name } (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.

border-left-width (<length>)

The thickness of the line.

border-left-color (<color>)

The color of the line.

border-left-style (none | solid)

The style of the line.

border-right

{ name } (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.

border-right-width (<length>)

The thickness of the line.

border-right-color (<color>)

The color of the line.

border-right-style (none | solid)

The style of the line.

border-top

{ name } (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.

border-top-width (<length>)

The thickness of the line.

border-top-color (<color>)

The color of the line.

border-top-style (none | solid)

The style of the line.

border-bottom

{ name } (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.

border-bottom-width (<length>)

The thickness of the line.

border-bottom-color (<color>)

The color of the line.

border-bottom-style (none | solid)

The style of the line.

outline

outline-left

{ name } (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.

outline-left-size (<length>)

The thickness of the line.

outline-left-color (<color>)

The color of the line.

outline-left-style (none | solid)

The style of the line.

outline-right

{ name } (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.

outline-right-size (<length>)

The thickness of the line.

outline-right-color (<color>)

The color of the line.

outline-right-style (none | solid)

The style of the line.

outline-top

{ name } (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.

outline-top-size (<length>)

The thickness of the line.

outline-top-color (<color>)

The color of the line.

outline-top-style (none | solid)

The style of the line.

outline-bottom

{ name } (none | (<length> (none | solid) <color>))

A shorthand to set the properties of the line.

outline-bottom-size (<length>)

The thickness of the line.

outline-bottom-color (<color>)

The color of the line.

outline-bottom-style (none | solid)

The style of the line.

corners

corners-top-left

border-top-left-radius (<length>)

The radius of the corner.

corners-top-right

border-top-right-radius (<length>)

The radius of the corner.

corners-bottom-left

border-bottom-left-radius (<length>)

The radius of the corner.

corners-bottom-right

border-bottom-right-radius (<length>)

The radius of the corner.

shadow

These properties describe an element's shadow.

box-shadow (none | (<length> <length> <length> <length> <color>))

A shorthand to set the shadow of an element to a box-shaped shadow. If set to none, the shadow will explicitly be disabled. Otherwise, the parameters are X offset, Y offset, size, blur and finally color.

shadow-offset

The offset of the shadow from its element. Setting this will move the entire shadow, as if the light were cast from a different angle.

shadow-offset-horizontal (<length>)

The horizontal offset of the shadow.

shadow-offset-vertical (<length>)

The vertical offset of the shadow.

shadow-color (<color>)

The color of the shadow.

shadow-size (<length>)

The size of the shadow. This expands the area used for the shadow compared to the element.

shadow-blur (<length>)

The amount of blur to use for the shadow. Increasing this will increase how smooth the shadow goes from fully transparent to the full shadow color.