> 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/circleruntime.md).

# CircleRuntime

## Introduction

`CircleRuntime` draws a circle with a **fill** and an **outline (stroke)**. The circle is sized to fit within its `Width` × `Height` bounds. The fill is set by `FillColor`; the outline is set by `StrokeColor` and `StrokeWidth`. On top of fill and outline, a `CircleRuntime` can also render a gradient, a drop shadow, and a dashed outline.

A freshly-constructed `CircleRuntime` renders as a **stroke-only outline** — `FillColor` defaults to transparent, `StrokeColor` defaults to white, and `StrokeWidth` defaults to `1`. Assign a visible `FillColor` to light up the fill, or set `StrokeWidth` to `0` to hide the outline.

For the full property surface — fill, outline, 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 and geometry render out of the box, but the **fill** and the richer effects (gradient, drop shadow, dashed stroke, anti-aliasing) only draw once the `Gum.Shapes.<platform>` package is added — otherwise they are stored and round-trip but silently do not draw. Skia, .NET MAUI, and raylib support the full surface natively. See the [Shapes](/gum/code/standard-visuals/shapes-apos.shapes.md) page for setup.
{% endhint %}

### Code Example

The following code creates an outlined `CircleRuntime`:

```csharp
// Initialize
var circle = new CircleRuntime();
circle.Width = 128;
circle.Height = 128;
circle.StrokeColor = Color.Green; // This is a Microsoft.Xna.Framework.Color
container.Children.Add(circle);
```

<figure><img src="/files/QCmXy6Qw6MtiPhlUsUvA" alt=""><figcaption><p>Green outlined circle</p></figcaption></figure>

To fill the circle, assign a visible `FillColor`. On MonoGame, KNI, and FNA the fill requires the shape support package (see the [Shapes](/gum/code/standard-visuals/shapes-apos.shapes.md) page):

```csharp
// Initialize
var circle = new CircleRuntime();
circle.Width = 128;
circle.Height = 128;
circle.FillColor = Color.Green; // light up the fill
container.Children.Add(circle);
```

## 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 (`CircleRuntime` 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:

```
GET https://docs.flatredball.com/gum/code/standard-visuals/circleruntime.md?ask=<question>
```

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.