This topic lists the supported USS properties and their accepted values.
USS data types
USS data types define values and keywords accepted by USS properties.
<length>: Represents a distance value.
<number>: Represents either an integer or a number with a fractional component.
<integer>: Represents a whole number.
<color>: Represents a color. A color can be defined with a #hexadecimal code, rgb(), or rgba(). Color keywords such as blue or transparent are not supported.
<resource>: Represents an asset in a Resources folder.
<url>: Represents an asset specified by a path. It can be expressed as either a relative path or an absolute path.
USS syntax
UIElements style properties use the same grammar syntax as W3C CSS documents:
Keyword values appear as is. For example: auto, baseline.
Basic data types appear between angle brackets ( < and >). For example: <length>, <color>.
Non-terminals that share the same name as a property appear between angle brackets and single straight quotes ( <' and '>). For example, <‘width’>.
If a property value has more than one component:
Several juxtaposed words mean that all of them must occur, in the given order.
A bar (|) separates two or more alternatives: exactly one must occur.
A double bar (||) separates two or more options: one or more must occur, in any order.
A double ampersand (&&) separates two or more components, all of which must occur, in any order.
Square brackets ([]) denote grouping.
Every type, keyword, or angle-bracketed group may be followed by modifiers:
an asterisk (*) indicates that the preceding type, word, or group occurs zero or more times.
a plus (+) indicates that the preceding type, word, or group occurs one or more times.
a question mark (?) indicates that the preceding type, word, or group is optional.
a pair of numbers in curly braces ({A,B}) indicates that the preceding type, word, or group occurs at least A and at most B times.
Inherited properties
When no value is specified for an inherited property, the element gets the value from its parent element. For example, use an inherited property to set the font for all elements.
The width and height specifies the size of the element. If width is not specified, the width is based on the width of the element’s contents. If height is not specified, the height is based on the height of the element’s contents.
Margins
margin-left: <length> | auto;
margin-top: <length> | auto
margin-right: <length> | auto
margin-bottom: <length> | auto
Shorthand
margin: [<length> | auto]{1,4}
The margin shorthand options are applied as follows:
1 length: Applied to all 4 margins.
2 lengths: The first is applied to margin-top and margin-bottom. The second is applied to margin-left and margin-right.
3 lengths: The first is applied to margin-top. The second is applied to margin-left and margin-right. The third is applied to margin-bottom.
4 lengths: The lengths are applied in this order : margin-top, margin-right, margin-bottom, margin-left
Borders
border-left-width: <length>
border-top-width: <length>
border-right-width: <length>
border-bottom-width: <length>
Shorthand
border-width: <length>{1,4}
The border-width shorthand options are applied as follows:
1 length: Applied to all 4 border widths.
2 lengths: The first is applied to border-top-width and border-bottom-width. The second is applied to border-left-width and border-right-width.
3 lengths: The first is applied to border-top-width. The second is applied to border-left-width and border-right-width. The third is applied to border-bottom-width.
4 lengths: The lengths are applied in this order: border-top-width, border-right-width, border-bottom-width, border-left-width
Padding
padding-left: <length>
padding-top: <length>
padding-right: <length>
padding-bottom: <length>
Shorthand
padding: <length>{1,4}
The padding shorthand options are applied as follows:
1 length: Applied to all 4 padding.
2 lengths: The first is applied to padding-top and padding-bottom. The second is applied to padding-left and padding-right.
3 lengths: The first is applied to padding-top. The second is applied to padding-left and padding-right. The third is applied to padding-bottom.
4 lengths: The lengths are applied in this order: padding-top, padding-right, padding-bottom, padding-left
Flex layout
This section lists the properties for positioning visual elements. UIElements includes a layout engine that positions visual elements based on layout and styling properties. The layout engine implements a subset of Flexbox: a HTML/CSS layout system.
By default, all items are vertically placed in their container.
align-content: flex-start | flex-end | center | stretch
align-items: flex-start | flex-end | center | stretch
justify-content: flex-start | flex-end | center | space-between | space-around
Relative and absolute positioning
Positioning
position: absolute | relative
This property is set to relative by default, which positions the element based on its parent. If this property is set to absolute, the element leaves its parent layout and values are specified based on the parent bounds.
Position
left: <length> | auto
top: <length> | auto
right: <length> | auto
bottom: <length> | auto
The distance from the parent edge or the original position of the element.
Drawing properties
The drawing properties set the background, borders, and appearance of the visual element.
When assigning a background image, it can be drawn with respect to a simplified 9-slice specification:
-unity-slice-left: <integer>
-unity-slice-top: <integer>
-unity-slice-right: <integer>
-unity-slice-bottom: <integer>
Borders
border-color: <color>
border-top-left-radius: <length>
border-top-right-radius: <length>
border-bottom-left-radius: <length>
border-bottom-right-radius: <length>
Shorthand
border-radius: <length>{1,4}
The border-radius shorthand options are applied as follows:
1 length: Applied to all 4 border-radius properties.
2 lengths: The first is applied to border-top-left-radius and border-bottom-right-radius. The second is applied to border-bottom-left-radius and border-top-right-radius
3 lengths: The first is applied to border-top-left-radius. The second is applied to border-bottom-left-radius and border-top-right-radius. The third is applied to border-bottom-right-radius.
4 lengths: The lengths are applied in this order: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
Appearance
overflow: hidden | visible
opacity: <number>
visibility: visible | hidden
display: flex | none
The display default value is flex. Setting display to none removes the element.
Text properties
Text properties set the color, font, font size, and Unity specific properties for font resource, font style, alignment, word wrap, and clipping.
color: <color>
-unity-font: <resource> | <url>
font-size: <number>
-unity-font-style: normal | italic | bold | bold-and-italic
Is something described here not working as you expect it to? It might be a Known Issue. Please check with the Issue Tracker at issuetracker.unity3d.com.
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thanks for helping to make the Unity documentation better!