S&box Wiki

Supported Style Properties

Supported Style Properties

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.

Anything marked in bold may behave differently to how you expect it.

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 Parameters Examples / Notes
align-content auto / flex-end / flex-start / center / stretch / space-between / space-around / baseline / stretch
align-items as above
align-self as above
backdrop-filter blur(Length) / saturate(Length) backdrop-filter: blur(10px) saturate(80%)
background Fills in the properties below
background-color Color
background-image url(string) / linear-gradient(Color, Color) / radial-gradient(Color, Color)
background-position Length, Length (optional) background-position: 10px, background-position: 10px 15px
background-repeat no-repeat / repeat-x / repeat-y / repeat
background-size Length, Length (optional) background-size: 10px, background-size: 10px 15px
border Fills in the properties below border: 10px solid white
border-bottom Length
border-bottom-color Color
border-bottom-left-radius Length
border-bottom-right-radius Length
border-bottom-width Length
border-left Length
border-left-color Color
border-left-width Length
border-radius Length border-radius: 10px, border-radius: 10px 0px 10px 10px
border-right Length
border-right-color Color
border-right-width Length
border-top Length
border-top-color Color
border-top-width Length
bottom Length
box-shadow Length, Length (optional), Length (blur, optional), Length (spread, optional), Color
color Color
cursor none / text / progress / wait / pointer
display flex (default) / none Everything is flex by default.
flex-basis Length
flex-direction column / column-reverse / row-reverse / row
flex-grow float
flex-shrink float
flex-wrap wrap / wrap-reverse / nowrap
font-color Color
font-family string Specify a single font, based on the filename, see Fonts.
font-size Length
font-style normal / italic
font-weight normal / bold / lighter / bolder / int font-weight: normal, font-weight: 300
height Length
justify-content center / flex-end / flex-start / space-between / space-around / space-evenly
left Length
margin Fills in the properties below
margin-bottom Length
margin-left Length
margin-right Length
margin-top Length
max-height Length
max-width Length
min-height Length
min-width Length
mix-blend-mode normal / lighten / multiply
opacity Float
overflow hidden / scroll / visible
padding Fills in the properties below
padding-bottom Length
padding-left Length
padding-right Length
padding-top Length
pointer-events none / all / visible / auto
position relative (default) / absolute See how it works: https://yogalayout.com/docs/absolute-relative-layout/
right Length
text-align center / left / right
text-shadow Length, Length (optional), Length (blur, optional), Length (spread, optional), Color
top Length
transform Fills in the properties below
transform-origin-x Length
transform-origin-y Length
transition Fills in the properties below
transition-delay float
transition-duration float
transition-property string
transition-timing-function linear / ease / ease-in-out / ease-out / ease-in / bounce-in / bounce-out / bounce-in-out
white-space normal / nowrap
width Length
z-index int

Special Pages



Render Time: 51ms

DB GetPage 36
Generate Html 1
SaveChanges (1) 9
Render Body 0
Render Sidebar 1