> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/code/standard-visuals/rectangleruntime.md). # RectangleRuntime ## Introduction `RectangleRuntime` draws a rectangle with a **fill** and an **outline (stroke)**, plus an optional uniform `CornerRadius` for rounded corners. Its size is controlled by `Width` and `Height`. The fill is set by `FillColor`; the outline is set by `StrokeColor` and `StrokeWidth`. Fill and stroke render independently and simultaneously: `IsFilled` only gates the fill, `StrokeWidth = 0` only gates the stroke, and neither hides the other, so the common bordered panel / button / card look (a filled body with a visible border) works directly. On top of fill and outline, a `RectangleRuntime` can also render a gradient, a drop shadow, and a dashed outline. A freshly-constructed `RectangleRuntime` is 50 × 50 and renders as a **stroke-only outline**: `IsFilled` defaults to `false`, so the fill is gated off even though `FillColor` defaults to opaque white. `StrokeColor` defaults to white and `StrokeWidth` defaults to `1`. Set `IsFilled = true` to show the fill (assigning `FillColor` alone does not show it), or set `StrokeWidth` to `0` to hide the outline. `IsFilled` defaults to `false` because `RectangleRuntime` is historically outline-only. It pairs with an opaque white `FillColor`, so setting `IsFilled = true` alone yields a visible white fill; see [Shapes](/gum/code/standard-visuals/shapes-apos.shapes.md#fill) for the full rationale. For the full property surface (fill, outline, corner radius, gradient, drop shadow, dashed stroke, and the platform/package requirements), see the [Shapes](/gum/code/standard-visuals/shapes-apos.shapes.md#circleruntime-and-rectangleruntime) page. The examples below cover the common cases. {% hint style="info" %} On MonoGame, KNI, and FNA the outline, geometry, and a plain (square-cornered) **fill** all render out of the box, with no extra package needed. `CornerRadius` and the richer effects (gradient, drop shadow, dashed stroke, anti-aliasing) only draw once the `Gum.Shapes.` package is added; otherwise they are stored and round-trip but silently do not draw. (`CircleRuntime`'s fill has the opposite requirement; see its own page.) See the [Shapes](/gum/code/standard-visuals/shapes-apos.shapes.md) page for setup. Skia, .NET MAUI, raylib, and Silk.NET support the full surface natively; no additional package needed. {% endhint %} ### Code Example The following code creates an outlined `RectangleRuntime`: ```csharp // Initialize var rectangle = new RectangleRuntime(); rectangle.Width = 120; rectangle.Height = 24; rectangle.StrokeColor = Color.Pink; // This is a Microsoft.Xna.Framework.Color container.Children.Add(rectangle); ```

Pink outlined rectangle

To fill the rectangle and round its corners while keeping its outline, set `IsFilled = true`, assign a `FillColor`, and set a `CornerRadius`; the stroke keeps rendering at the same time, so this produces a bordered, rounded, filled rectangle. On MonoGame, KNI, and FNA the fill renders without any package, but rounding the corners requires the shape support package (see the [Shapes](/gum/code/standard-visuals/shapes-apos.shapes.md) page); without it the rectangle still fills and keeps its border, just square-cornered: ```csharp // Initialize var rectangle = new RectangleRuntime(); rectangle.Width = 120; rectangle.Height = 24; rectangle.CornerRadius = 8; rectangle.IsFilled = true; rectangle.FillColor = Color.Pink; // show the fill rectangle.StrokeColor = Color.Black; // the outline keeps rendering on top of the fill container.Children.Add(rectangle); ``` ## Legacy color members {% hint style="warning" %} The `Color`, `Red`, `Green`, `Blue`, and `Alpha` members are obsolete and are being phased out. They write the **stroke** color (`RectangleRuntime` was historically outline-only) and are kept only for backward compatibility. Use `StrokeColor` for the outline and `FillColor` for the fill instead. For the property mapping and the automated code fix, see [Migrating to 2026 May](/gum/gum-tool/upgrading/migrating-to-2026-may.md). {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.flatredball.com/gum/code/standard-visuals/rectangleruntime.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.