Revision Difference
supported-style-properties#529679
<cat>Dev.UI</cat>
<title>Supported Style Properties</title>
We try to keep as close to standard web styles as possible - but not every property is implemented. We'll use this page to highlight any differences.
# Common Types
| Name | Description / Notes | Examples |
|-------------------|-----|
| float | A standard float | `flex-grow: 10`
| Color | Can have alpha. | `color: #fff`, `color: #ffffffaa`, `color: rgba( red, 0.5 )` |
| Length | A dimension, pixel or relative. | `left: 10px`, `left: 10%` |
# Supported Properties
| Name | Description / Notes | Examples |
|-------------------|-----|
| color | Color |
| width | Length|
| min-width | Length|
| max-width | Length|
| height | Length|
| min-height | Length|
| max-height | Length|
| left | Length|
| right | Length|
| top | Length|
| bottom | Length|
| opacity | Float |
| background-color | Color |
| padding | Sugar |
| padding-left | Length |
| padding-right | Length |
| padding-top | Length |
| padding-bottom | Length |
| margin-left | Length |
| margin-right | Length |
| margin-top | Length |
| margin-bottom | Length |
| border-radius | Fills in the properties below | `border-radius: 10px`, `border-radius: 10px 0px 10px 10px`
| border-top-left-radius | Length |
| border-top-right-radius | Length |
| border-bottom-right-radius | Length |
| border-bottom-left-radius | Length |
| border | Fills in the properties below | `border: 10px solid white`
| border-left-width | Length |
| border-top-width | Length |
| border-right-width | Length |
| border-bottom-width | Length |
| border-left-color | Color |
| border-top-color | Color |
| border-right-color | Color |
| border-bottom-color | Color |
| font-size | Length |
| font-color | Length |
| font-weight | int |
| flex-basis | Length |
| flex-grow | float |
| flex-shrink | float |
| transform-origin-x | Length |
| transform-origin-y | Length |
| z-index | float |
| font-family | string |
| cursor | none / text / progress / wait / pointer |
| pointer-events| all / none |
| mix-blend-mode | normal / lighten / multiply |
# New Properties
| Name | Description / Notes | Examples |
|-------------------|-----|
| aspect-ratio | float: Added by Facebook Flexbox. Element tries to keep its aspect ratio. |
| background-image-tint | Color: multiplies the background image by this color |