Property reference

Every CSS property MasonKit elements understand, in alphabetical order. Shorthands share a row with their longhands. "Inherited" means a value set on a Mason element reaches its Mason descendants, as in CSS; inheritance does not cross into or out of plain NativeScript views (see Mixing with NativeScript views).

Values are summarized; follow the link in the last column for details and examples. Unless a note says otherwise, a property works on iOS, Android and Windows.

Lengths accept a bare number (CSS px), px, dip, dppx (device pixel), pt, em, rem, %, vw, vh, vmin, vmax and calc()/min()/max()/clamp(), unless noted. See Units.

Property	Values	Inherited	Notes	See
align-content	normal, start, end, flex-start, flex-end, center, stretch, space-between, space-around, space-evenly	no		Flexbox, Grid
align-items	normal, start, end, flex-start, flex-end, center, baseline, stretch	no		Flexbox
align-self	as align-items	no		Flexbox
aspect-ratio	a number or <w> / <h>	no		Box model
backdrop-filter	filter functions, as filter	no	drop-shadow() has no effect	Effects
background, background-color, background-image, background-position (-x, -y), background-size, background-repeat	CSS background syntax, multiple layers; background-repeat includes space and round	no		Backgrounds
background-origin, background-clip, background-attachment, background-blend-mode	box keywords, plus text for the clip; scroll/fixed/local; blend modes	no	Blend modes need Android 10 (API 29)	Backgrounds
block-size, min-block-size, max-block-size	as height, min-height, max-height	no	Logical: the height in horizontal text, the width in vertical text	Box model
border, border-top, border-right, border-bottom, border-left	<width> <style> <color>	no		Borders
border-block, border-inline, border-block-start, border-block-end, border-inline-start, border-inline-end (and -width, -style, -color)	as the physical forms	no	Logical, mapped by writing mode and direction	Borders
border-color, border-top-color, border-right-color, border-bottom-color, border-left-color	colors, 1 to 4 values	no		Borders
border-image	source, slice, width, outset, repeat	no		Borders
border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius	lengths, percentages, / for elliptical corners	no		Borders
border-start-start-radius, border-start-end-radius, border-end-end-radius, border-end-start-radius	as the physical corners	no	Logical corners, mapped by writing mode and direction	Borders
border-style, border-top-style, border-right-style, border-bottom-style, border-left-style	none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset	no		Borders
border-width, border-top-width, border-right-width, border-bottom-width, border-left-width	lengths, thin, medium, thick	no		Borders
bottom, left, right, top	length, percentage, auto	no		Positioning
box-shadow	[inset] <x> <y> [blur] [spread] [color], comma separated	no		Box shadows
box-sizing	border-box, content-box	no	Defaults to border-box, unlike browsers	Box model
caret-color	auto, a color	yes	Inputs	Typography
clear	none, left, right, both	no		Flow
clip-path	basic shapes, reference boxes, none	no		Effects
color	a color	yes		Typography
column-gap, row-gap, gap	lengths, percentages; gap takes 1 or 2 values	no	grid-gap, grid-row-gap and grid-column-gap are accepted as legacy aliases	Flexbox, Grid
corner-shape, corner-shape-top-left, corner-shape-top-right, corner-shape-bottom-right, corner-shape-bottom-left	round, squircle, square, bevel, scoop, notch, superellipse(<number>)	no		Borders
direction	ltr, rtl	yes		Typography
display	none, block, inline, inline-block, flex, inline-flex, grid, inline-grid	no		Flow
filter	blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia()	no		Effects
flex	none, auto, <grow> [<shrink>] [<basis>]	no	Shorthand for flex-grow, flex-shrink, flex-basis	Flexbox
flex-basis	auto, length, percentage, content, min-content, max-content, fit-content	no		Flexbox
flex-direction	row, row-reverse, column, column-reverse	no		Flexbox
flex-flow	<direction> <wrap>	no	Shorthand	Flexbox
flex-grow, flex-shrink	numbers	no		Flexbox
flex-wrap	nowrap, wrap, wrap-reverse	no		Flexbox
float	none, left, right	no		Flow
font-family	a family list	yes		Typography
font-feature-settings	normal, OpenType feature tags	no	Set it on the text element itself	Typography
font-size	length, percentage, em, rem	yes		Typography
font-stretch	keywords, percentage	yes	Android 12 (API 31) with a variable font; iOS needs a condensed or expanded face	Typography
font-style	normal, italic, oblique	yes		Typography
font-weight	normal, bold, 100 to 900	yes		Typography
grid-area, grid-row, grid-row-start, grid-row-end, grid-column, grid-column-start, grid-column-end	line numbers, line names, span <n>, area names, auto	no		Grid
grid-auto-columns, grid-auto-rows	track size list	no		Grid
grid-auto-flow	row, column, dense, row dense, column dense	no		Grid
grid-template-areas	quoted area strings	no		Grid
grid-template-columns, grid-template-rows	track lists, repeat(), minmax(), fr, auto-fill, auto-fit	no		Grid
height, width	auto, length, percentage, min-content, max-content, fit-content, fit-content(<length>), stretch	no		Box model
hyphens	none, manual, auto	yes		Typography
inline-size, min-inline-size, max-inline-size	as width, min-width, max-width	no	Logical: the width in horizontal text, the height in vertical text	Box model
inset	1 to 4 values of top, right, bottom, left	no	Shorthand	Positioning
inset-block, inset-inline, inset-block-start, inset-block-end, inset-inline-start, inset-inline-end	as inset	no	Logical, follows the writing mode and direction	Box model
justify-content	as align-content	no		Flexbox
justify-items	as align-items	no		Grid
justify-self	as align-self	no		Grid
letter-spacing	normal, length	yes		Typography
line-clamp, -webkit-line-clamp	none, a number of lines	no		Typography
line-height	normal, number (multiplier), length	yes	A bare number set from code below 4 is a multiplier, otherwise CSS px	Typography
list-style, list-style-type, list-style-position	none, disc, circle, square, decimal; inside, outside	yes		Lists
margin, margin-top, margin-right, margin-bottom, margin-left	length, percentage, auto	no		Box model
margin-block, margin-inline, margin-block-start, margin-block-end, margin-inline-start, margin-inline-end	as margin	no	Logical	Box model
mask, mask-image, mask-mode, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-composite	CSS masking syntax	no	-webkit-mask* forms accepted	Effects
mask-border, mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, mask-border-mode	9-slice mask syntax	no	-webkit-mask-box-image accepted	Effects
max-height, max-width, min-height, min-width	length, percentage, auto	no	Sizing keywords (min-content, ...) are not accepted	Box model
object-fit	fill, contain, cover, none, scale-down	no	Images	Effects
object-position	keywords, lengths, percentages	no	Images	Effects
opacity	0 to 1	no		Effects
overflow, overflow-x, overflow-y	visible, hidden, clip, scroll, auto	no	overflow-inline and overflow-block map by writing mode	Scrolling
padding, padding-top, padding-right, padding-bottom, padding-left	length, percentage	no		Box model
padding-block, padding-inline, padding-block-start, padding-block-end, padding-inline-start, padding-inline-end	as padding	no	Logical	Box model
place-content, place-items, place-self	<align> [<justify>]	no	Shorthands	Grid
position	static, relative, absolute, fixed, sticky	no		Positioning
scrollbar-width	a number	no	A width, not the CSS auto/thin/none keywords	Scrolling
text-align	left, right, center, justify, start, end	yes		Typography
text-decoration, text-decoration-line, text-decoration-style, text-decoration-color, text-decoration-thickness	full CSS values, including overline and wavy	no		Typography
text-indent	length, percentage	yes		Typography
text-justify	auto, none, inter-word, inter-character, distribute	yes	Windows honours none only	Typography
text-orientation	mixed, upright, sideways	yes		Flow
text-combine-upright	none, all, digits (2-4)	yes	Vertical text	Flow
text-spacing-trim	normal, space-all, space-first, trim-start, trim-both, trim-all, auto	yes	Line-start and line-end trims on iOS and Android	Typography
text-overflow	clip, ellipsis	no		Typography
text-shadow	<x> <y> [blur] [color], comma separated	yes		Typography
text-transform	none, capitalize, uppercase, lowercase	yes		Typography
text-wrap	wrap, nowrap, balance, pretty, stable	yes	balance, pretty and stable lay out as wrap	Typography
touch-action	auto, none, manipulation, pan-x, pan-y, pinch-zoom	no		Events
transform	transform functions	no	3D functions are flattened to 2D; platform differences in the linked table	Effects
transform-origin	keywords, lengths, percentages	no		Effects
unicode-bidi	normal, embed, bidi-override, isolate, isolate-override, plaintext	no		Typography
vertical-align	baseline, sub, super, text-top, text-bottom, middle, top, bottom, length, percentage	no	Inline content	Typography
visibility	visible, hidden	no	Handled by NativeScript core; keeps the element's space	Effects
white-space	normal, pre, pre-wrap, pre-line, nowrap, break-spaces	yes		Typography
word-spacing	normal, length, percentage	yes	Android needs Android 10 (API 29)	Typography
writing-mode	horizontal-tb, vertical-rl, vertical-lr	yes	Vertical containers lay out their children vertically	Flow
z-index	an integer	no		Positioning

Not supported

These have no effect on MasonKit elements today:

• order
• outline and its longhands (use a spread box-shadow for focus rings)
• font-weight: bolder / lighter, font-style: oblique <angle>
• perspective and 3D rendering (3D transform functions are flattened to 2D, and iOS ignores most of them)
• display: contents, grid-template and grid shorthands
• transition
• url() references to SVG filters, masks and paint servers

Stylesheet features

Selectors, classes, @media, @keyframes, var() custom properties, specificity and pseudo-classes come from NativeScript's CSS engine; MasonKit registers its properties into it, so all of the above work in .css and .scss files and in inline style attributes. See How CSS applies.