# This file is automatically generated. Please don't edit it manually.
# To submit a bug report on the content, see
# https://devforum.roblox.com/c/bug-reports/documentation-issues/72

name: UIStroke
type: class
memory_category: Instances
summary: |
  Applies an outline to text or a UI border.
description: |
  `Class.UIStroke` applies an outline to text or a UI border. Some properties
  may require enabling the
  [Improved UIStrokes beta](https://devforum.roblox.com/t/studio-beta-uistroke-improvements-scaling-offsets-and-more/3958036).

  Key features include:

  - Adjust the `Class.UIStroke.Color|Color` and
    `Class.UIStroke.Thickness|Thickness` of the stroke outline.
  - Change the stroke `Class.UIStroke.Transparency|Transparency` independently
    from the text or UI object.
  - Choose the `Class.UIStroke.LineJoinMode|LineJoinMode` of the stroke (round,
    bevel, or miter).
  - Specify the `Class.UIStroke.BorderStrokePosition|BorderStrokePosition` on
    its parent's border and/or an additional
    `Class.UIStroke.BorderOffset|BorderOffset` to the stroke's position.
  - Add a gradient to the stroke via the `Class.UIGradient` instance.
  - Use [rich text](../../../ui/rich-text.md) tags to add stroke to inline text
    segments.

  For more details on the `Class.UIStroke` object, see
  [Appearance Modifiers](../../../ui/appearance-modifiers.md).
code_samples: []
inherits:
  - UIComponent
descendants: []
tags: []
deprecation_message: ''
properties:
  - name: UIStroke.ApplyStrokeMode
    summary: |
      Determines whether to apply the stroke to the object's border instead of
      the text itself.
    description: |
      When a `Class.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.

      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-As-Text-Outline.png" width="376" />
      <figcaption><code>ApplyStrokeMode</code> = <code>Enum.ApplyStrokeMode.Contextual|Contextual</code></figcaption>
      </figure>
      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-Stroke-Mode-Border.png" width="376" />
      <figcaption><code>ApplyStrokeMode</code> = <code>Enum.ApplyStrokeMode.Border|Border</code></figcaption>
      </figure>
    code_samples: []
    type: ApplyStrokeMode
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Appearance
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: UIStroke.BorderOffset
    summary: |
      Specifies an additional offset to the stroke's position, relative to the
      parent's minimum height or width.
    description: |
      This property specifies an additional offset (`Datatype.UDim`) to the
      stroke's position, relative to the parent's minimum height or width.

      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-BorderOffset-Out.png" width="312" />
      <figcaption><code>BorderOffset</code> = <code>(0.15, 0)</code></figcaption>
      </figure>
      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-BorderOffset-In.png" width="312" />
      <figcaption><code>BorderOffset</code> = <code>(0, -16)</code></figcaption>
      </figure>
    code_samples: []
    type: UDim
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Appearance
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: UIStroke.BorderStrokePosition
    summary: |
      Determines the stroke's position on its parent's border.
    description: |
      This property determines the stroke's position on its parent's border as
      an `Enum.BorderStrokePosition` value.

      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-BorderStrokePosition-Center.png" width="312" />
      <figcaption><code>BorderStrokePosition</code> = <code>Enum.BorderStrokePosition.Center|Center</code></figcaption>
      </figure>
      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-BorderStrokePosition-Inner.png" width="312" />
      <figcaption><code>BorderStrokePosition</code> = <code>Enum.BorderStrokePosition.Inner|Inner</code></figcaption>
      </figure>
      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-BorderStrokePosition-Outer.png" width="312" />
      <figcaption><code>BorderStrokePosition</code> = <code>Enum.BorderStrokePosition.Outer|Outer</code></figcaption>
      </figure>
    code_samples: []
    type: BorderStrokePosition
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Appearance
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: UIStroke.Color
    summary: |
      Determines the stroke color.
    description: |
      Determines the `Class.UIStroke` color. You can also insert a
      `Class.UIGradient` instance as a child to create gradient strokes.

      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-Color-Solid.png" width="376" />
      <figcaption><code>Color</code> = <code>(0, 95, 225)</code></figcaption>
      </figure>
      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-Color-Gradient.png" width="376" />
      <figcaption><code>UIStroke</code> with <code>Class.UIGradient</code> child</figcaption>
      </figure>
    code_samples: []
    type: Color3
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Appearance
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: UIStroke.Enabled
    summary: |
      Determines whether the stroke in visible.
    description: |
      This property determines whether the `Class.UIStroke` is visible. When set
      to `false`, the stroke will not be rendered. Defaults to `true`.
    code_samples: []
    type: boolean
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Data
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: UIStroke.LineJoinMode
    summary: |
      Determines how corners are interpreted.
    description: |
      This property determines how corners are interpreted. It accepts an
      `Enum.LineJoinMode` value of either `Enum.LineJoinMode.Round|Round`
      (default), `Enum.LineJoinMode.Bevel|Bevel`, or
      `Enum.LineJoinMode.Miter|Miter`.

      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-LineJoinMode-Round.png" width="376" />
      <figcaption><code>LineJoinMode</code> = <code>Enum.LineJoinMode.Round|Round</code></figcaption>
      </figure>
      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-LineJoinMode-Bevel.png" width="376" />
      <figcaption><code>LineJoinMode</code> = <code>Enum.LineJoinMode.Bevel|Bevel</code></figcaption>
      </figure>
      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-LineJoinMode-Miter.png" width="376" />
      <figcaption><code>LineJoinMode</code> = <code>Enum.LineJoinMode.Miter|Miter</code></figcaption>
      </figure>
    code_samples: []
    type: LineJoinMode
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Appearance
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: UIStroke.StrokeSizingMode
    summary: |
      Determines whether the stroke's `Class.UIStroke.Thickness|Thickness` will
      be measured in pixels or be relative to the parent.
    description: |
      This property determines whether the stroke's
      `Class.UIStroke.Thickness|Thickness` will be measured in pixels or be
      scaled relative to the parent. See `Enum.StrokeSizingMode` for further
      details.
    code_samples: []
    type: StrokeSizingMode
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Appearance
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: UIStroke.Thickness
    summary: |
      Determines the stroke's thickness.
    description: |
      This property determines the stroke's thickness, measured in pixels
      (default) or scaled relative to the parent, depending on
      `Class.UIStroke.StrokeSizingMode|StrokeSizingMode`.

      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-Thickness-4.png" width="376" />
      <figcaption><code>Thickness</code> = <code>4</code></figcaption>
      </figure>
      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-Thickness-12.png" width="376" />
      <figcaption><code>Thickness</code> = <code>12</code></figcaption>
      </figure>

      Be mindful of [tweening](../../../ui/animation.md) this `Class.UIStroke`
      property when applied to text objects. This renders and stores many glyph
      sizes each frame, potentially causing performance issues or text
      flickering.
    code_samples: []
    type: float
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Appearance
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: UIStroke.Transparency
    summary: |
      Sets the stroke opacity independently of the parent object's
      `Class.GuiObject.BackgroundTransparency|BackgroundTransparency` or
      `Class.TextLabel.TextTransparency|TextTransparency`.
    description: |
      This property sets the stroke opacity independently of the parent object's
      `Class.GuiObject.BackgroundTransparency|BackgroundTransparency` or
      `Class.TextLabel.TextTransparency|TextTransparency`. This allows you to
      render text and borders that are "hollow" (consisting of only an outline).

      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-Transparency-A.png" width="376" />
      <figcaption><code>Transparency</code> = <code>0.5</code> &nbsp;&middot;&nbsp; <code>Class.TextLabel.TextTransparency</code> = <code>0</code></figcaption>
      </figure>
      <figure>
      <img src="../../../assets/ui/ui-objects/UIStroke-Transparency-B.png" width="376" />
      <figcaption><code>Transparency</code> = <code>0</code> &nbsp;&middot;&nbsp; <code>Class.TextLabel.TextTransparency</code> = <code>1</code></figcaption>
      </figure>
    code_samples: []
    type: float
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Appearance
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: UIStroke.ZIndex
    summary: |
      Determines the order in which the stroke renders relative to sibling
      `Class.UIStroke` instances.
    description: |
      This property determines the order in which the stroke renders relative to
      sibling `Class.UIStroke` instances. Those with a lower `ZIndex` render
      under (behind) those with a higher `ZIndex`.

      Note that the rendering order for `Class.UIStroke` instances with the same
      `ZIndex` is undefined. Do not apply multiple `Class.UIStroke` instances
      with the same `ZIndex` if their rendering order matters.
    code_samples: []
    type: int
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Appearance
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
methods: []
events: []
callbacks: []