Applying Strokes
Applying Strokes
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
UIGradientinstance. - Use
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.
TextLabel with UIStroke child
Frame with UIStroke and UICorner childrenStroke 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.
UIStroke instances to a text object, one set to Contextual and the other to Border. This lets you control both the text outline and border separately.
Thickness
Stroke width is set by the UIStroke/Thickness|Thickness property, measured in pixels from the parent’s outer edges.
UIStroke/Thickness|Thickness property of a UIStroke applied 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.
UIStroke/Color|Color of 0, 95, 225
UIStroke with UIGradient childUIStroke can have child UIGradient|UIGradients, letting you set gradients on both the stroke and fill independently.
Transparency
The UIStroke/Transparency|Transparency property sets the stroke opacity independently of the parent object’s GuiObject/BackgroundTransparency|BackgroundTransparency or TextLabel/TextTransparency|TextTransparency. This allows you to render text and borders that are “hollow” (consisting of only an outline).
UIStroke/Transparency|Transparency of 0.5Object
TextLabel/TextTransparency|TextTransparency of 0
UIStroke/Transparency|Transparency of 0Object
TextLabel/TextTransparency|TextTransparency of 1Corner Style
The UIStroke/LineJoinMode|LineJoinModeproperty lets you control how corners are interpreted. It accepts a value of either Round, Bevel, or Miter. Default is Round.
Rich Text
If your text object has articles/gui rich text|rich text enabled, you can control stroke properties on segments of the string via the <stroke> tag.
| Property | Description | Default |
|---|---|---|
color |
Sets the stroke color. | rgb(0, 0, 0) |
joins |
Sets the corner style. Can be set to round, bevel, or miter. |
round |
thickness |
Sets the stroke thickness. | 1 |
transparency |
Sets the stroke transparency. | 0 |
The <font color="#c80032"><stroke color="#fcc633" thickness="4">dragon</stroke></font> is hungry