RmlUi DocumentationProperty index
The following table lists all properties recognised by RCSS. The Notes column details important changes from the CSS specification.
| Name | Values | Initial value | Applies to | Inherited | Percentages | Notes |
|---|---|---|---|---|---|---|
align-content |
flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | stretch | multi-line flex containers | no | ||
align-items |
flex-start | flex-end | center | baseline | space-around | stretch | stretch | flex containers | no | ||
align-self |
auto | flex-start | flex-end | center | baseline | space-around | stretch | auto | flex containers | no | ||
animation |
See animations | none | all | no | ||
backdrop-filter |
none | <filter-function>( <properties> ) | none | all | no | ||
background |
background-color |
Excludes images, use decorators instead. | ||||
background-color |
<colour> | transparent | all | no | ||
border |
border-width border-color |
Excludes border style. | ||||
border-color |
border-top-color border-right-color border-bottom-color border-left-color |
|||||
border-top border-right border-bottom border-left |
border-<edge>-width border-<edge>-color |
Excludes border style. | ||||
border-top-color border-right-color border-bottom-color border-left-color |
<color> | black | all | no | ||
border-top-width border-right-width border-bottom-width border-left-width |
<length> | <percentage> | 0px | all | no | width of containing block | |
border-width |
border-top-width border-right-width border-bottom-width border-left-width |
all | ||||
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius |
<length> | 0px | all | no | Percentages and two-axis radii not supported. | |
border-radius |
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius |
all | ||||
bottom |
auto | <length> | <percentage> | auto | positioned elements | no | height of containing block | |
box-sizing |
content-box | border-box | content-box | block and replaced inline elements | no | ||
box-shadow |
none | <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset? | none | all elements | no | ||
caret-color |
auto | <colour> | auto | all elements | yes | ||
clear |
left | right | both | none | none | block-level elements | no | ||
clip |
auto | none | always | <number> | auto | all | no | Controls interaction with ancestor element’s clipping regions. | |
color |
<colour> | black | all | yes | ||
column-gap |
<length> | <percentage> | 0px | flex containers and table elements | no | initial width of flex container or table | |
cursor |
<string> | empty | all | yes | <string> refers an application specific cursor name. | |
decorator |
none | <name> | <type>( <properties> ) | none | all | no | See decorators for details. | |
display |
inline | block | inline-block | flow-root | flex | inline-flex | table | inline-table | table-row-group | table-row | table-column-group | table-column | table-cell | none | inline | all | no | ||
drag |
none | drag | drag-drop | block | clone | none | all | no | Introduced for RCSS. Controls generation of drag messages. | |
filter |
none | <filter-function>( <properties> ) | none | all | no | ||
fill-image |
<string> | empty | progress element | no | <string> refers to a sprite name or an image url. | |
flex |
auto | none | <flex-grow> <flex-shrink>? <flex-basis>? | <flex-basis> | 0 1 auto | flex items | no | ||
flex-basis |
<length> | <percentage> | auto | auto | flex items | no | ||
flex-direction |
row | row-reverse | column | column-reverse | row | flex containers | no | ||
flex-flow |
<flex-direction> <flex-wrap> | |||||
flex-grow |
<number> | 0 | flex items | no | ||
flex-shrink |
<number> | 1 | flex items | no | ||
flex-wrap |
nowrap | wrap | wrap-reverse | nowrap | flex containers | no | ||
float |
left | right | none | none | all | no | ||
focus |
none | auto | auto | all | yes | Introduced for RCSS. | |
font |
font-style font-weight font-size font-family |
|||||
font-effect |
none | <type>( <properties> ) | none | all | yes | See font effects for details. | |
font-family |
<string> | all | yes | Only single family supported. | ||
font-size |
<length> | <percentage> | 12px | all | yes | size of parent font | |
font-style |
normal | italic | normal | all | yes | ‘oblique’ not supported. | |
font-weight |
normal | bold | <number [1,1000]> | normal | all | yes | Relative weights not supported. | |
gap |
row-gap column-gap |
flex containers and table elements | Also supports tables, replacing the CSS border-spacing property. |
|||
height |
<length> | <percentage> | auto | auto | block and replaced inline elements | no | height of containing block | |
image-color |
<color> | white | <img> elements and decorators | no | Introduced for RCSS. | |
justify-content |
flex-start | flex-end | center | space-between | space-around | space-evenly | flex-start | flex containers | no | ||
left |
auto | <length> | <percentage> | auto | positioned elements | no | width of containing block | |
letter-spacing |
normal | <length> | normal | all elements | yes | ||
line-height |
<number> | <length> | <percentage> | 1.2 | all | yes | font size | ‘normal’ not supported. |
margin |
margin-top margin-right margin-bottom margin-left |
|||||
margin-top margin-right margin-bottom margin-left |
<length> | <percentage> | auto | 0px | all | no | width of containing block | |
mask-image |
none | <name> | <type>( <properties> ) | none | all | no | Mask image is rendered using decorators. | |
max-height |
<length> | <percentage> | none | none | block and replaced inline elements | no | height of containing block | |
min-height |
<length> | <percentage> | 0px | block and replaced inline elements | no | height of containing block | |
max-width |
<length> | <percentage> | none | none | block and replaced inline elements | no | width of containing block | |
min-width |
<length> | <percentage> | 0px | block and replaced inline elements | no | width of containing block | |
nav |
none | auto | horizontal | vertical | none | tabbable elements | no | Shorthand for navigation properties. | |
nav-up nav-right nav-down nav-left |
none | auto | <id> | none | tabbable elements | no | Controls spatial navigation. | |
opacity |
<number> | 1 | all | yes | ||
overflow |
overflow-x overflow-y |
|||||
overflow-x |
visible | hidden | scroll | auto | visible | block elements | no | Content clipped if either axis is not ‘visible’. | |
overflow-y |
visible | hidden | scroll | auto | visible | block elements | no | Content clipped if either axis is not ‘visible’. | |
overscroll-behavior |
auto | contain | auto | scroll containers | no | ||
padding |
padding-top padding-right padding-bottom padding-left |
|||||
padding-top padding-right padding-bottom padding-left |
<length> | <percentage> | 0px | all | no | width of containing block | |
perspective |
none | <length ≥ 0px> | none | all | no | ||
perspective-origin |
<perspective-origin-x> || <perspective-origin-y> | 50% 50% | all | no | ||
pointer-events |
auto | none | auto | all | yes | ||
position |
static | relative | absolute | fixed | static | all | no | ‘fixed’ is positioned like ‘absolute’ but ignores scrolling. | |
right |
auto | <length> | <percentage> | auto | positioned elements | no | width of containing block | |
row-gap |
<length> | <percentage> | 0px | flex containers and table elements | no | initial height of flex container or table | |
scrollbar-margin |
<length> | 0px | scrollbar-horizontal and scrollbar-vertical elements | no | Introduced for RCSS. Specifies a bottom / right margin (depending on orientation) that will collapse with the scrollbar on the complementary axis. | |
tab-index |
none | auto | none | all | no | Introduced for RCSS. Controls order of focus switching when the tab key is pressed. | |
text-align |
left | right | center | left | block-level elements | yes | ‘justify’ not supported. | |
text-decoration |
none | underline | overline | line-through | none | all | yes | ||
text-transform |
none | capitalize | uppercase | lowercase | none | all | yes | ||
top |
auto | <length> | <percentage> | auto | positioned elements | no | height of containing block | |
transition |
See transitions | none | all | no | ||
transform |
none | <transform-function>+ | none | all | no | ||
transform-origin |
[<transform-origin-x> || <transform-origin-y>] <transform-origin-z>? | 50% 50% 0px | all | no | ||
vertical-align |
baseline | sub | super | text-top | text-bottom | middle | top | center | bottom | <percentage> | <length> | baseline | inline-level elements | no | line-height | |
visibility |
visible | hidden | visible | all | no | ||
white-space |
normal | pre | nowrap | pre-wrap | pre-line | normal | all elements | yes | ||
word-break |
normal | break-all | break-word | normal | all elements | yes | ||
width |
<length> | <percentage> | auto | auto | block and replaced inline elements | no | width of containing block | |
z-index |
<number> | auto | auto | all | no | Applies to all elements. For documents, ‘auto’ allows pulling to front, otherwise remains at top or bottom. |