UIStroke
Applies an outline to text or a UI border.
Memory category | Instances |
---|
Member index 6
Description
UIStroke 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 LineJoinMode of the stroke (round, bevel, or miter).
- Add a gradient to the stroke via the UIGradient instance.
- Use rich text tags to add stroke to inline text segments.
For more details on the UIStroke object, see Appearance Modifiers.
History 19
- 553 Change Default of Transparency from to 0
- 553 Change Default of Thickness from to 1
- 553 Change Default of LineJoinMode from to Round
- 553 Change Default of Enabled from to true
- 553 Change Default of Color from to Color3(0, 0, 0)
- 553 Change Default of ApplyStrokeMode from to Contextual
- 486 Change ThreadSafety of Transparency from ReadOnly to ReadSafe
- 486 Change ThreadSafety of Thickness from ReadOnly to ReadSafe
- 486 Change ThreadSafety of LineJoinMode from ReadOnly to ReadSafe
- 486 Change ThreadSafety of Enabled from ReadOnly to ReadSafe
- 486 Change ThreadSafety of Color from ReadOnly to ReadSafe
- 486 Change ThreadSafety of ApplyStrokeMode from ReadOnly to ReadSafe
- 466 Add Transparency
- 466 Add Thickness
- 466 Add LineJoinMode
- 466 Add Enabled
- 466 Add Color
- 466 Add ApplyStrokeMode
- 466 Add UIStroke
Members 6
ApplyStrokeMode
Type | Default | |
---|---|---|
ApplyStrokeMode | Contextual |
When a UIStroke instance is applied to a text object, this property determines whether to apply the stroke to the object's border instead of the text itself.

ApplyStrokeMode
= Contextual
ApplyStrokeMode
= BorderThread safety | ReadSafe |
---|---|
Category | Appearance |
Loaded/Saved | true |
History 3
- 553 Change Default of ApplyStrokeMode from to Contextual
- 486 Change ThreadSafety of ApplyStrokeMode from ReadOnly to ReadSafe
- 466 Add ApplyStrokeMode
Color
Type | Default | |
---|---|---|
Color3 | 0, 0, 0 |
Determines the UIStroke color. You can also insert a UIGradient instance as a child to create gradient strokes.

Color
= (0, 95, 225)

UIStroke
with UIGradient childThread safety | ReadSafe |
---|---|
Category | Appearance |
Loaded/Saved | true |
Enabled
Type | Default | |
---|---|---|
bool | true |
This property determines whether the UIStroke is visible. When set
to false
, the stroke will not be rendered. Defaults to true
.
Thread safety | ReadSafe |
---|---|
Category | Data |
Loaded/Saved | true |
LineJoinMode
Type | Default | |
---|---|---|
LineJoinMode | Round |
This property determines how corners are interpreted. It accepts an LineJoinMode value of either Round (default), Bevel, or Miter.

LineJoinMode
= Round
LineJoinMode
= Bevel
LineJoinMode
= MiterThread safety | ReadSafe |
---|---|
Category | Appearance |
Loaded/Saved | true |
History 3
- 553 Change Default of LineJoinMode from to Round
- 486 Change ThreadSafety of LineJoinMode from ReadOnly to ReadSafe
- 466 Add LineJoinMode
Thickness
Type | Default | |
---|---|---|
float | 1 |
This property determines the stroke's thickness, measured in pixels from the parent's outer edges.

Thickness
= 4

Thickness
= 12
Be mindful of tweening this UIStroke property when applied to text objects. This renders and stores many glyph sizes each frame, potentially causing performance issues or text flickering.
Thread safety | ReadSafe |
---|---|
Category | Appearance |
Loaded/Saved | true |
Transparency
Type | Default | |
---|---|---|
float | 0 |
This property sets the stroke opacity independently of the parent object's BackgroundTransparency or TextTransparency. This allows you to render text and borders that are "hollow" (consisting of only an outline).

Transparency
= 0.5
· TextLabel.TextTransparency = 0

Transparency
= 0
· TextLabel.TextTransparency = 1
Thread safety | ReadSafe |
---|---|
Category | Appearance |
Loaded/Saved | true |
History 3
- 553 Change Default of Transparency from to 0
- 486 Change ThreadSafety of Transparency from ReadOnly to ReadSafe
- 466 Add Transparency