UIStroke is an instance that applies an outline to text or a UI border. Key features include:
- Adjust the color and thickness of the stroke outline.
- Change the stroke transparency independently from the text or UI object.
- Choose the corner style of the stroke (round, bevel, or miter).
- Add a gradient to the stroke via the
articles/gui rich text|rich texttags to add stroke to inline text segments.
Text Outline or Border
UIStroke can operate as either a text outline or as a border. When parented to a text object, it applies to the text’s outline; when parented to other
GuiObject|GuiObjects, it applies to the border.
Stroke Mode »
When applied to a text object, the default stroke behavior can be overridden by the
UIStroke/ApplyStrokeMode|ApplyStrokeMode property, letting you apply the stroke to the object’s border instead of the text itself.
UIStrokeinstances to a text object, one set to Contextual and the other to Border. This lets you control both the text outline and border separately.
Stroke width is set by the
UIStroke/Thickness|Thickness property, measured in pixels from the parent’s outer edges.
UIStroke/Thickness|Thicknessproperty of a
UIStrokeapplied to text objects. This renders and stores many glyph sizes each frame, potentially causing performance issues or text flickering.
Color / Gradient
Stroke color is set through the
UIStroke/Color|Color property. You can also insert a
UIGradient instance as a child of the
UIStroke to create gradient strokes.
UIStrokecan have child
UIGradient|UIGradients, letting you set gradients on both the stroke and fill independently.
UIStroke/Transparency|Transparency property sets the stroke opacity independently of the parent object’s
TextLabel/TextTransparency|TextTransparency. This allows you to render text and borders that are “hollow” (consisting of only an outline).
UIStroke/LineJoinMode|LineJoinModeproperty lets you control how corners are interpreted. It accepts a value of either Round, Bevel, or Miter. Default is Round.
If your text object has
articles/gui rich text|rich text enabled, you can control stroke properties on segments of the string via the
||Sets the stroke color.||
||Sets the corner style. Can be set to
||Sets the stroke thickness.||
||Sets the stroke transparency.||
The <font color="#c80032"><stroke color="#fcc633" thickness="4">dragon</stroke></font> is hungry