Skip to content

UICorner

Not yet Class GUI

UI modifier which applies deformation to corners of its parent GuiObject.

Not implemented yet

Rounded corners need a renderer path that the legacy GUI quad renderer does not have.

Workaround: Use square frames, or a 9-slice image with rounded corners.

0 Nova members · 11 modern Roblox members not implemented yet

Description

UICorner is a modifier which applies deformation to corners of its parent GuiObject. Input, but not descendants, will be clipped to the round corner area. See UI appearance modifiers for examples.

In order to keep the circular shape of round corners, each corner radius (UDim) is internally calculated as follows:

  • The radius of the X axis is always the same as the radius of Y axis.
  • Scale rounding will always apply to the minimum width or height.
  • Rounded rectangles will always be in a "pill" shape if CornerRadius is set to a value that leads to a calculated result greater than half of the rectangle's minimum width or height.

Alternatively to UICorner, rounded corners can be accomplished using slices which are suitable for decorative borders that are not simply rounded. See 9‑Slice Design for details.

Note that UICorner can not be applied to a ScrollingFrame.

Individual Corners

Each corner has its own radius property (TopLeftRadius, TopRightRadius, BottomRightRadius, BottomLeftRadius). The CornerRadius property is a convenience shorthand that sets all four corners at once and reads from TopLeftRadius.

When using styling with UICorner, avoid configuring both CornerRadius and the individual corner radii in style rules at the same time, as this may produce unexpected results.

Inheritance

Object → Instance → UIBase → UIComponent → UICorner

Properties

Member Signature Summary
BottomLeftRadius BottomLeftRadius: UDim Determines the radius of the bottom-left corner.
BottomRightRadius BottomRightRadius: UDim Determines the radius of the bottom-right corner.
CornerRadius CornerRadius: UDim Sets all four corner radii at once and reads from TopLeftRadius.
TopLeftRadius TopLeftRadius: UDim Determines the radius of the top-left corner.
TopRightRadius TopRightRadius: UDim Determines the radius of the top-right corner.

Roblox reference: UICorner

Generated from Nova's API dump and Roblox creator-docs. Nova-only members come from the engine's reflection metadata.