UIStroke

Show Deprecated

For more details on the UIStroke object, see here.

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 UIGradient instance.
  • Use rich text tags to add stroke to inline text segments.

Rich Text

If your text object has rich text enabled, you can control stroke properties on segments of the string via the <stroke> tag.

PropertyDescriptionDefault
colorSets the stroke color.rgb(0, 0, 0)
joinsSets the corner style. Can be set to round, bevel, or miter.round
thicknessSets the stroke thickness.1
transparencySets the stroke transparency.0
1The &lt;font color="#c80032"&gt;<mark

2  >&lt;stroke color="#fcc633" thickness="4"&gt;dragon&lt;/stroke&gt;</mark

3>&lt;/font&gt; is hungry.

4

Summary

Properties

ApplyStrokeMode: ApplyStrokeMode

Determines whether to apply the stroke to the object's border instead of the text itself.

Color: Color3

Determines the stroke color.

Enabled: boolean

Determines whether the stroke in visible.

LineJoinMode: LineJoinMode

Determines how corners are interpreted.

Thickness: number

Determines the stroke's thickness.

Transparency: number

Sets the stroke opacity independently of the parent object's BackgroundTransparency or TextTransparency.

Events

Methods

Properties

ApplyStrokeMode

ApplyStrokeMode
Read Parallel

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.

Contextual
Border

For more details on the UIStroke object, see here.

Color

Color3
Read Parallel

Determines the UIStroke stroke color. You can also insert a UIGradient instance as a child of the UIStroke to create gradient strokes.

Stroke UIStroke/Color|Color of **0**, **95**, **225**
UIStroke with UIGradient child

Note that both the parent object and UIStroke can have child UIGradients, letting you set gradients on both the stroke and fill independently.

For more details on the UIStroke object, see here.

Enabled

boolean
Read Parallel

This property determines whether the UIStroke is visible. When set to false, the stroke will not be rendered. The value defaults to true.

For more details on the UIStroke object, see here.

LineJoinMode

LineJoinMode
Read Parallel

This property determines how corners are interpreted. It accepts a value of either Round, Bevel, or Miter. Default is Round.

Round
Bevel
Miter

For more details on the UIStroke object, see here.

Thickness

number
Read Parallel

This property determines the stroke's thickness, measured in pixels from the parent's outer edges.

4
12

Be mindful of tweening the 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.

For more details on the UIStroke object, see here.

Transparency

number
Read Parallel

The Transparency 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).

Stroke UIStroke/Transparency|Transparency of **0.5**Object TextLabel/TextTransparency|TextTransparency of **0**
Stroke UIStroke/Transparency|Transparency of **0**Object TextLabel/TextTransparency|TextTransparency of **1**

For more details on the UIStroke object, see here.

Events

Methods