INTRODUCTION
IntroductionCore ConceptsGETTING STARTED
InstallationQuick startWhirl Compiler SettingsCORE CONCEPTS
Using Utility ClassesStyle FunctionsPseudo-Classes and statesResponsive DesignResponsive Base ElementThemeArbitrary ValuesLAYOUT
aspect-ratiodisplayoverflowpositionvisibilityobject-fittop / right / bottom / leftFLEXBOX
flex-basisflex-directionflex-wrapflexflex-growflex-shrinkgapjustify-contentalign-contentalign-itemsalign-selfSPACING
paddingmarginSIZING
widthmin-widthmax-widthheightmin-heightmax-heightTYPOGRAPHY
font-sizefont-styleauto-sizetext-outlineletter-spacingtext-aligncolorword-spacingparagraph-spacingtext-overflowoverflow-positionwhite-spaceBACKGROUND
background-colorbackground-imagebackground-positionbackground-repeatbackground-sizeBORDER
border-radiusborder-widthborder-colorEFFECTS
text-shadowopacityFILTER
Filterblurbrightnesscontrastgrayscalehue-rotateinvertsaturatesepiaTRANSITION
transition-propertytransition-durationtransition-timing-functiondelayTRANSFORM
rotatescaletransform-origintranslateborder-width
| Class | Styles |
|---|---|
| border | border-width: 1px; |
| border-<number> | border-width: <number>px; |
| border-(length:<custom-property>) | border-width: var(<custom-property>); |
| border-[<value>] | border-width: <value>; |
| border-x | border-right-width: 1px; border-left-width: 1px; |
| border-x-<number> | border-right-width: <number>px; border-left-width: <number>px; |
| border-x-(length:<custom-property>) | border-right-width: var(<custom-property>); border-left-width: var(<custom-property>); |
| border-x-[<value>] | border-right-width: <value>; border-left-width: <value>; |
| border-y | border-top-width: 1px; border-bottom-width: 1px; |
| border-y-<number> | border-top-width: <number>px; border-bottom-width: <number>px; |
| border-y-(length:<custom-property>) | border-top-width: var(<custom-property>); border-bottom-width: var(<custom-property>); |
| border-y-[<value>] | border-top-width: <value>; border-bottom-width: <value>; |
| border-t | border-top-width: 1px; |
| border-t-<number> | border-top-width: <number>px; |
| border-t-(length:<custom-property>) | border-top-width: var(<custom-property>); |
| border-t-[<value>] | border-top-width: <value>; |
| border-r | border-right-width: 1px; |
| border-r-<number> | border-right-width: <number>px; |
| border-r-(length:<custom-property>) | border-right-width: var(<custom-property>); |
| border-r-[<value>] | border-right-width: <value>; |
| border-b | border-bottom-width: 1px; |
| border-b-<number> | border-bottom-width: <number>px; |
| border-b-(length:<custom-property>) | border-bottom-width: var(<custom-property>); |
| border-b-[<value>] | border-bottom-width: <value>; |
| border-l | border-left-width: 1px; |
| border-l-<number> | border-left-width: <number>px; |
| border-l-(length:<custom-property>) | border-left-width: var(<custom-property>); |
| border-l-[<value>] | border-left-width: <value>; |