Rectangle Element

The Rectangle element draws a rectangular shape. It can be filled with a solid color, given a visible border stroke, or both, with optional rounded corners. Use it for card frames, background panels, stat boxes, and decorative dividers.

Properties

FillColor

FillColor sets the interior color of the rectangle. It accepts any CSS color value: #RRGGBB hex codes, named colors (e.g. navy, gold), or [[ConstantName]] constant references. When FillColor is not set, the rectangle renders with a transparent fill — useful when you only want a visible border. Data bindings allow the fill color to vary per card row, e.g. "{{FactionColor}}".

FillOpacity

FillOpacity controls how transparent the fill color is, from 0 (invisible fill) to 1 (fully opaque). Setting a value like 0.4 creates a semi-transparent colored panel, letting content or background images show through. This is useful for frosted-glass style overlays or subtle tinted zones.

CornerRadius

CornerRadius rounds the corners of the rectangle, specified in millimetres. A value of 0 (the default) produces sharp right-angle corners. Increasing the radius progressively rounds the corners. Setting it to half the element's smallest dimension (width or height) creates a fully rounded pill shape. Use this for badges, tags, or any element where a softer edge is desired.

By default, all four corners are rounded equally. You can control which corners receive the rounding effect using the :: separator followed by a comma-separated list of corner names: TopLeft, TopRight, BottomLeft, BottomRight.

Format: "<radius>" or "<radius>::<corner1>,<corner2>,…"

In the template editor, the CornerRadius field shows a number input (with a data reference picker) and four corner toggle checkboxes — one for each corner. All four corners are checked by default. Uncheck a corner to leave it sharp.

Stroke

Stroke sets the thickness of the rectangle's border in millimetres. A value of 0 means no border is drawn. The stroke is centered on the element's edge — half extends inward and half outward from the bounding box. Typical card frame borders are between 0.3 mm and 1 mm.

StrokeColor

StrokeColor sets the color of the border. Like FillColor, it accepts hex values, CSS named colors, and [[ConstantName]] constant references. If Stroke is non-zero but StrokeColor is not set, the border defaults to black. Using constant references lets you apply a consistent border color across all framing elements from one place.

StrokeOpacity

StrokeOpacity controls the transparency of the border, from 0 (invisible border) to 1 (fully opaque). This is useful for decorative borders that should subtly blend with the background, or for creating a faint grid overlay.

OuterColor

OuterColor fills the area outside the rounded rectangle with a solid color. This is useful when you have a CornerRadius set and want the corners outside the rounded shape to be filled with a specific color rather than being transparent — for example, matching the card background color so the rounded rectangle blends seamlessly with the surrounding area.

TintColor

TintColor applies a color tint to both the fill and stroke of the rectangle. Use this to dynamically shift the rectangle's colors at render time — for example, tinting a neutral grey panel with a faction color bound from the data. Accepts #RRGGBB hex codes, CSS named colors, and [[ConstantName]] constant references.

TintAmount

TintAmount controls how strongly the TintColor is applied, from 0 (no tint — original colors) to 100 (full tint — solid tint color). Values in between blend the tint with the original fill and stroke colors proportionally.

Related

• Circle element
• None element