# Styles Styles are all predefined in Wisej.NET and roughly correspond to **CSS3** styles. Wisej.NET creates a dynamic CSS class and applies it to the widgets that use the appearance key and match the state that contains the style. It's very similar to using CSS classes with HTML elements. Some styles can be overridden by properties: i.e. The *backgroundColor* style is overridden by the *backgroundColor* property. The main differences between styles and properties are: * An application cannot change a style value, only a theme can. * Styles go into CSS classes named using the appearance key + state that contains the style, while properties are rendered on the widget's DOM element. * Styles are limited to the Decorators supported by the Wisej.NET JavaScript implementation. Decorators are JavaScript classes in charge of converting the styles set in the theme to CSS values. * Properties are unlimited. The JavaScript that defines a widget can add any number of themeable properties. ## Supported Styles This is the full list of all the supported styles: * **gradientStart** Property group: \[startColor, startColorPosition] {% hint style="info" %} Property groups are composite properties that can set the values of other properties using a shorthand array. See [Property Group](#property-group) for more information. {% endhint %} * **gradientEnd** Property group: \[ *endColor*, *endColorPosition* ] * **startColor** Start color of the background gradient. * **startColorPosition** Position in percent or pixels where to start the color. It's a number, do not use "%" or "px". Default: 0. * **endColor** End color of the background gradient. * **endColorPosition** Position in percent or pixels where to start the color. It's a number, do not use "%" or "px". Default: 100. * **orientation** The orientation of the gradient. Allowed values: "horizontal", "vertical" * **colorPositionUnit** Defines if the given gradient color position values are in % or px. * **backgroundColor** Color of the background. * **backgroundImage** The URL or theme name of the background image * **backgroundRepeat** How the background image should be repeated. Allowed values: "repeat", "repeat-x", "repeat-y", "no-repeat", "scale". * **backgroundSize** The background size. Allowed values: "auto", CSS size, i.e. "60px 120px", "cover", "contain". See [CSS3 background-size](http://www.w3schools.com/cssref/css3_pr_background-size.asp). * **fillColor** The fill color for background SVG images. * **backgroundPosition** Property group: \[ *backgroundPositionX*, *backgroundPositionY* ] * **backgroundPositionX** Either a string or a number, which defines the horizontal position of the background image. Allowed values: Integer, "center", "left", "right". * **backgroundPositionY** Either a string or a number, which defines the vertical position of the background image. Allowed values: Integer, "center", "top", "bottom". * **borderImage** Specify an image as the border around an element. This style allows you to specify an image to be used instead of the normal border around an element. See [CSS3 border-image](http://www.w3schools.com/cssref/css3_pr_border-image.asp). * **slice** Property group: \[ *sliceTop*, *sliceRight*, *sliceBottom*, *sliceLeft* ] * **sliceTop** The top slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images. * **sliceRight** The right slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images. * **sliceBottom** The bottom slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images. * **sliceLeft** The left slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images. * **repeat** Property group: \[ *repeatX*, *repeatY* ] * **repeatX** Specifies how the images for the sides and the middle part of the border image are scaled and tiled horizontally. Allowed values: "stretch", "repeat", "round". * **repeatY** Specifies how the images for the sides and the middle part of the border image are scaled and tiled vertically. Allowed values: "stretch", "repeat", "round". * **fill** Specifies whether to use the central part of the border image to fill the element. Allowed values: true, false. Default: true. * **borderImageMode** Configures the border image mode. Allowed values: "horizontal" (left and right borders), "vertical" (top and bottom borders), "grid" (all edges). * **radius** Property group: \[ *radiusTopLeft*, *radiusTopRight*, *radiusBottomRight*, *radiusBottomLeft* ] * **radiusTopLeft** Top left corner radius in pixels. * **radiusTopRight** Top right corner radius in pixels. * **radiusBottomRight** Bottom right corner radius in pixels. * **radiusBottomLeft** Bottom left corner radius in pixels. * **shadowColor** The color of the shadow. * **shadowSpreadRadius** The spread radius of the shadow in pixels. * **shadowBlurRadius** The blur radius of the shadow in pixels. * **shadowLength** Property group: \[ *shadowVerticalLength*, *shadowHorizontalLength* ] * **shadowVerticalLength** Vertical length of the shadow in pixels. * **shadowHorizontalLength** Horizontal length of the shadow in pixels. * **inset** Specifies whether the shadows are drawn inside the border. Allowed value: true, false. Default: false. * **left** Property group: \[ *widthLeft, styleLeft, colorLeft* ] * **right** Property group: \[ *widthRight, styleRight, colorRight* ] * **top** Property group: \[ *widthTop, styleTop, colorTop* ] * **bottom** Property group: \[ *widthBottom, styleBottom, colorBottom* ] * **width** Property group: \[*widthTop, widthRight, widthBottom, widthLeft* ] * **widthTop** Top width of border in pixels. * **widthRight** Right width of border in pixels. * **widthBottom** Bottom width of border in pixels. * **widthLeft** Left width of border in pixels. * **style** Property group: \[ *styleTop, styleRight, styleBottom, styleLeft* ] * **styleTop** Top style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove". * **styleRight** Right style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove". * **styleBottom** Bottom style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove". * **styleLeft** Left style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove". * **color** Property group: \[ *colorTop, colorRight, colorBottom, colorLeft* ] * **colorTop** Top color of the border. * **colorRight** Right color of the border. * **colorBottom** Bottom color of the border. * **colorLeft** Left color of the border. * **innerWidth** Property group: \[ *innerWidthTop, innerWidthRight, innerWidthBottom, innerWidthLeft* ] * **innerWidthTop** Top inner border width in pixels. * **innerWidthRight** Right inner border width in pixels. * **innerWidthBottom** Bottom inner border width in pixels. * **innerWidthLeft** Left inner border width in pixels. * **innerColor** Property group: \[ *innerColorTop, innerColorRight, innerColorBottom, innerColorLeft* ] * **innerColorTop** Top inner border color. * **innerColorRight** Right inner border color. * **innerColorBottom** Bottom inner border color. * **innerColorLeft** Left inner border color. * **innerOpacity** The opacity of the inner border as a decimal value. Default: 1. * **innerStyle** Property group: \[ *innerStyleTop, innerStyleRight, innerStyleBottom, innerStyleLeft* ] * **innerStyleTop** Top style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove". * **innerStyleRight** Right style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove". * **innerStyleBottom** Bottom style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove". * **innerStyleLeft** Left style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove". * **clip** Specify the painting area of the background. Allowed values: "border-box", "padding-box", "content-box", "initial", "inherit". * **transform** CSS3 transform string. See [CSS3 transform](http://www.w3schools.com/cssref/css3_pr_transform.asp). * **transition** CSS3 transition string. See [CSS3 transition](http://www.w3schools.com/css/css3_transitions.asp). This style allows a theme to define simple animations. * **css** Custom CSS3 rules. The css style can define complex CSS3 rules and pseudo element. There is no limit to what can be defined in the css style. This is the animation and pseudo element used in the Material-3 theme when an editable widget gains the focus: ```javascript "css": "{\":after\":{\"content\":\"''\",\"display\":\"block\",\"position\":\"absolute\",\"left\":\"0px\",\"bottom\":\"0px\",\"width\":\"100%\",\"height\":\"2px\",\"background-color\":\"focusFrame\",\"transform\":\"scaleX(1)\",\"transition\":\"all 0.3s\"}} ``` {% hint style="info" %} When setting CSS properties directly, Wisej supports both the HTML notation (i.e. "background-color") and the DOM notation (i.e. "backgroundColor"). {% endhint %} ## Property Group Property groups are composite properties that can set the values of other properties using a shorthand array. The code below shows a property group used to set related properties. In a theme definition file you can set a property group or a single property or both; they are applied in the order they are declared. {% tabs %} {% tab title="gradientStart and radius property groups" %} ```javascript "styles": { "gradientStart": ["activeButton", "25"], "radius": [3, 3, 3, 3] } ``` {% endtab %} {% endtabs %} The definition above is equivalent to: {% tabs %} {% tab title="gradientStart and radius properties" %} ```javascript "styles": { "startColor": ["activeButton", "25"], "startColorPosition": ["activeButton", "25"], "radiusTopLeft": 3, "radiusTopRight": 3, "radiusBottomRight": 3, "radiusBottomLeft": 3 } ``` {% endtab %} {% endtabs %} {% hint style="info" %} Property groups that contain CSS values for the four sides or four corners of an element follow the TRBL pattern (top, right, bottom, left). {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.wisej.com/theme-builder/theme-elements/styles.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.