PcoWSkbVqDnWTu_dm2ix

Applying Strokes

Applying Strokes

5 min

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 UIGradient instance.
  • Use articles/gui rich text|rich text tags 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 children

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.

Contextual
Border
Note that it's possible to parent two 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.

4
12

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.

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

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

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

Corner 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.

Round
Bevel
Miter

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
Tags:
  • stroke
  • outline
  • border
  • text