PcoWSkbVqDnWTu_dm2ix
Collapse Sidebar

UICorner

Show deprecated

UICorner

Show deprecated

A UIComponent that will apply deformation to shapes of corners of its parent GuiObject.
Input, but not descendants, will be clipped to the round corner area.

ImageLabel with rounded corners | Image Credit: 0Techy

Using the component

To use the UICorner UIComponent:

  1. Create a Frame / ImageLabel / ImageButton / TextLabel / TextButton / ViewportFrame
  2. Insert a UICorner component as its child
  3. Adjust the round corner radius by changing the UICorner/CornerRadius|CornerRadius property

UICorner vs 9-slices

Alternatively, rounded backgrounds can be accomplished using 9-slices. As a result, it is helpful to understand the pros and cons of UICorner and 9-slices:

UICorner

  • Pros
  • Can be used to round ViewportFrame|ViewportFrames and image assets
  • Allows for a scriptable and dynamic corner radius
  • Cons
  • There is a performance overhead (Screen Space specifically) as it needs extra processing on each pixel, while 9-slice only involves simple sampling

9-slices

  • Pros
  • Suitable for highly decorative borders that are not just rounded
  • If you have a lot of rounded rectangles with solid colors and you pay special attention to low-end devices, using 9-slice may be more performance efficient
  • Cons
  • Hard to apply to existing image assets
  • Different corner sizes require different assets

How the corner radius is calculated internally

In order to keep the circular shape of round corners with the UDim CornerRadius value, the round corner radius internally will be calculated as follows:

radius = min(min(rectWidth, rectHeight) / 2, CornerRadius.scale * min(rectWidth, rectHeight) + CornerRadius.offset)

This means that:

  1. The radius of the x-axis is always the same as the radius of y axis.
  2. The scale will always apply to the minimum edge.
  3. 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 rectangles’ minimum edge.

It is suggested to always use either scale or offset to define CornerRadius instead of mixing them up.

Properties

UDim

CornerRadius

Determines the radius, in pixels, of the UICorner UIComponent

Inherited from Instance: Show Hide

bool

Archivable

Determines if an Instance can be cloned using /Instance/Clone or saved to file.

string

ClassName

[ReadOnly] [NotReplicated]

A read-only string representing the class this Instance belongs to

int

DataCost

[Hidden] [ReadOnly] [NotReplicated] [Deprecated]

The cost of saving the instance using data persistence.

string

Name

A non-unique identifier of the Instance

Instance

Parent

[NotReplicated]

Determines the hierarchical parent of the Instance

bool

RobloxLocked

[Hidden]

A deprecated property that used to protect CoreGui objects

bool

archivable

[Hidden] [NotReplicated] [Deprecated]
string

className

[ReadOnly] [NotReplicated] [Deprecated]

Functions

Inherited from Instance: Show Hide

void

ClearAllChildren ( )

This function destroys all of an Instance’s children.

Instance

Clone ( )

Create a copy of an object and all its descendants, ignoring objects that are not Instance/Archivable|Archivable

void

Destroy ( )

Sets the Instance/Parent property to nil, locks the Instance/Parent property, disconnects all connections and calls Destroy on all children.

Instance

FindFirstAncestor ( string name )

Returns the first ancestor of the Instance whose Instance/Name is equal to the given name.

Instance

FindFirstAncestorOfClass ( string className )

Returns the first ancestor of the Instance whose Instance/ClassName is equal to the given className.

Instance

FindFirstAncestorWhichIsA ( string className )

Returns the first ancestor of the Instance for whom Instance/IsA returns true for the given className.

Instance

FindFirstChild ( string name , bool recursive )

Returns the first child of the Instance found with the given name.

Instance

FindFirstChildOfClass ( string className )

Returns the first child of the Instance whose Instance/ClassName|ClassName is equal to the given className.

Instance

FindFirstChildWhichIsA ( string className , bool recursive )

Returns the first child of the Instance for whom Instance/IsA returns true for the given className.

Instance

FindFirstDescendant ( string name )

Returns the first descendant found with the given FullName (or partial FullName).

Actor

GetActor ( )

Returns the Actor associated with the Instance, usually the first Actor ancestor

Variant

GetAttribute ( string attribute )

Returns the attribute which has been assigned to the given name

RBXScriptSignal

GetAttributeChangedSignal ( string attribute )

Returns an event that fires when the given attribute changes

Dictionary

GetAttributes ( )

Returns a dictionary of string → variant pairs for each of the Instance|Instance’s attributes

Objects

GetChildren ( )

Returns an array containing all of the Instance’s children.

string

GetDebugId ( int scopeLength )

[NotBrowsable]

Returns a coded string of the Instances DebugId used internally by Roblox.

Array

GetDescendants ( )

[CustomLuaState]

Returns an array containing all of the descendants of the instance

string

GetFullName ( )

Returns a string describing the Instance’s ancestry.

RBXScriptSignal

GetPropertyChangedSignal ( string property )

Get an event that fires when a given property of an object changes.

bool

IsA ( string className )

[CustomLuaState]

Returns true if an Instance’s class matches or inherits from a given class

bool

IsAncestorOf ( Instance descendant )

Returns true if an Instance is an ancestor of the given descendant.

bool

IsDescendantOf ( Instance ancestor )

Returns true if an Instance is a descendant of the given ancestor.

void

Remove ( )

[Deprecated]

Sets the object’s Parent to nil, and does the same for all its descendants.

void

SetAttribute ( string attribute , Variant value )

Sets the attribute with the given name to the given value

Instance

WaitForChild ( string childName , double timeOut )

[CustomLuaState] [CanYield]

Returns the child of the Instance with the given name. If the child does not exist, it will yield the current thread until it does.

Objects

children ( )

[Deprecated]

Returns an array of the object’s children.

Instance

clone ( )

[Deprecated]
void

destroy ( )

[Deprecated]
Instance

findFirstChild ( string name , bool recursive )

[Deprecated]
Objects

getChildren ( )

[Deprecated]
bool

isA ( string className )

[Deprecated] [CustomLuaState]
bool

isDescendantOf ( Instance ancestor )

[Deprecated]
void

remove ( )

[Deprecated]

Events

Inherited from Instance: Show Hide

RBXScriptSignal

AncestryChanged ( Instance child , Instance parent )

Fires when the Instance/Parent property of the object or one of its ancestors is changed.

RBXScriptSignal

AttributeChanged ( string attribute )

Fires whenever an attribute is changed on the Instance

RBXScriptSignal

Changed ( string property )

Fired immediately after a property of an object changes.

RBXScriptSignal

ChildAdded ( Instance child )

Fires when an object is parented to this Instance.

RBXScriptSignal

ChildRemoved ( Instance child )

Fires when a child is removed from this Instance.

RBXScriptSignal

DescendantAdded ( Instance descendant )

Fires when a descendant is added to the Instance

RBXScriptSignal

DescendantRemoving ( Instance descendant )

Fires immediately before a descendant of the Instance is removed.

RBXScriptSignal

Destroying ( )

RBXScriptSignal

childAdded ( Instance child )

[Deprecated]