UICorner
UI modifier which applies deformation to corners of its parent GuiObject.
| Memory category | Instances |
|---|
Member index 5
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.
History 75
- 721 Change CanSave of TopRightRadius from false to true
- 721 Change ReadSecurity of TopRightRadius from RobloxScriptSecurity to None
- 721 Change Tags of TopRightRadius from [Hidden, NotReplicated] to []
- 721 Change Category of TopRightRadius from Data to Individual Corners
- 721 Change CanLoad of TopRightRadius from false to true
- 721 Change Tags of TopLeftRadius from [Hidden, NotReplicated] to []
- 721 Change ReadSecurity of TopLeftRadius from RobloxScriptSecurity to None
- 721 Change Category of TopLeftRadius from Data to Individual Corners
- 721 Change CanLoad of TopLeftRadius from false to true
- 721 Change CanSave of TopLeftRadius from false to true
- 721 Change CanSave of CornerRadius from true to false
- 721 Change Tags of CornerRadius from [] to [NotReplicated]
- 721 Change ReadSecurity of BottomRightRadius from RobloxScriptSecurity to None
- 721 Change Category of BottomRightRadius from Data to Individual Corners
- 721 Change CanSave of BottomRightRadius from false to true
- 721 Change CanLoad of BottomRightRadius from false to true
- 721 Change Tags of BottomRightRadius from [Hidden, NotReplicated] to []
- 721 Change ReadSecurity of BottomLeftRadius from RobloxScriptSecurity to None
- 721 Change Category of BottomLeftRadius from Data to Individual Corners
- 721 Change CanLoad of BottomLeftRadius from false to true
- 721 Change Tags of BottomLeftRadius from [Hidden, NotReplicated] to []
- 721 Change CanSave of BottomLeftRadius from false to true
- 720 Change Tags of TopRightRadius from [] to [Hidden, NotReplicated]
- 720 Change ReadSecurity of TopRightRadius from None to RobloxScriptSecurity
- 720 Change Category of TopRightRadius from Individual Corners to Data
- 720 Change CanSave of TopRightRadius from true to false
- 720 Change CanLoad of TopRightRadius from true to false
- 720 Change Tags of TopLeftRadius from [] to [Hidden, NotReplicated]
- 720 Change ReadSecurity of TopLeftRadius from None to RobloxScriptSecurity
- 720 Change Category of TopLeftRadius from Individual Corners to Data
- 720 Change CanSave of TopLeftRadius from true to false
- 720 Change CanLoad of TopLeftRadius from true to false
- 720 Change Tags of CornerRadius from [NotReplicated] to []
- 720 Change CanSave of CornerRadius from false to true
- 720 Change Tags of BottomRightRadius from [] to [Hidden, NotReplicated]
- 720 Change ReadSecurity of BottomRightRadius from None to RobloxScriptSecurity
- 720 Change Category of BottomRightRadius from Individual Corners to Data
- 720 Change CanSave of BottomRightRadius from true to false
- 720 Change CanLoad of BottomRightRadius from true to false
- 720 Change Tags of BottomLeftRadius from [] to [Hidden, NotReplicated]
- 720 Change ReadSecurity of BottomLeftRadius from None to RobloxScriptSecurity
- 720 Change Category of BottomLeftRadius from Individual Corners to Data
- 720 Change CanSave of BottomLeftRadius from true to false
- 720 Change CanLoad of BottomLeftRadius from true to false
- 720 Change CanLoad of TopRightRadius from false to true
- 720 Change Tags of TopRightRadius from [Hidden, NotReplicated] to []
- 720 Change ReadSecurity of TopRightRadius from RobloxScriptSecurity to None
- 720 Change Category of TopRightRadius from Data to Individual Corners
- 720 Change CanSave of TopRightRadius from false to true
- 720 Change ReadSecurity of TopLeftRadius from RobloxScriptSecurity to None
- 720 Change Category of TopLeftRadius from Data to Individual Corners
- 720 Change CanSave of TopLeftRadius from false to true
- 720 Change Tags of TopLeftRadius from [Hidden, NotReplicated] to []
- 720 Change CanLoad of TopLeftRadius from false to true
- 720 Change Tags of CornerRadius from [] to [NotReplicated]
- 720 Change CanSave of CornerRadius from true to false
- 720 Change CanLoad of BottomRightRadius from false to true
- 720 Change CanSave of BottomRightRadius from false to true
- 720 Change Category of BottomRightRadius from Data to Individual Corners
- 720 Change Tags of BottomRightRadius from [Hidden, NotReplicated] to []
- 720 Change ReadSecurity of BottomRightRadius from RobloxScriptSecurity to None
- 720 Change Category of BottomLeftRadius from Data to Individual Corners
- 720 Change CanLoad of BottomLeftRadius from false to true
- 720 Change Tags of BottomLeftRadius from [Hidden, NotReplicated] to []
- 720 Change ReadSecurity of BottomLeftRadius from RobloxScriptSecurity to None
- 720 Change CanSave of BottomLeftRadius from false to true
- 713 Add TopRightRadius
- 713 Add TopLeftRadius
- 713 Add BottomRightRadius
- 713 Add BottomLeftRadius
- 553 Change Default of CornerRadius from to UDim(0, 8)
- 486 Change ThreadSafety of CornerRadius from ReadOnly to ReadSafe
- 462 Change ThreadSafety of CornerRadius from to ReadOnly
- 435 Add CornerRadius
- 435 Add UICorner
Members 5
BottomLeftRadius
| Type | Default | |
|---|---|---|
| UDim | 0, 8 | |
This property is currently in beta. To use it, enable New UI Capabilities in Studio's beta features window.
A UDim property that determines the radius of the bottom-left corner independently. Setting CornerRadius overwrites all four individual corner radii to the same value.
| Thread safety | ReadSafe |
|---|---|
| Category | Individual Corners |
| Loaded/Saved | true |
History 16
- 721 Change ReadSecurity of BottomLeftRadius from RobloxScriptSecurity to None
- 721 Change Category of BottomLeftRadius from Data to Individual Corners
- 721 Change CanLoad of BottomLeftRadius from false to true
- 721 Change Tags of BottomLeftRadius from [Hidden, NotReplicated] to []
- 721 Change CanSave of BottomLeftRadius from false to true
- 720 Change Tags of BottomLeftRadius from [] to [Hidden, NotReplicated]
- 720 Change ReadSecurity of BottomLeftRadius from None to RobloxScriptSecurity
- 720 Change Category of BottomLeftRadius from Individual Corners to Data
- 720 Change CanSave of BottomLeftRadius from true to false
- 720 Change CanLoad of BottomLeftRadius from true to false
- 720 Change Category of BottomLeftRadius from Data to Individual Corners
- 720 Change CanLoad of BottomLeftRadius from false to true
- 720 Change Tags of BottomLeftRadius from [Hidden, NotReplicated] to []
- 720 Change ReadSecurity of BottomLeftRadius from RobloxScriptSecurity to None
- 720 Change CanSave of BottomLeftRadius from false to true
- 713 Add BottomLeftRadius
BottomRightRadius
| Type | Default | |
|---|---|---|
| UDim | 0, 8 | |
This property is currently in beta. To use it, enable New UI Capabilities in Studio's beta features window.
A UDim property that determines the radius of the bottom-right corner independently. Setting CornerRadius overwrites all four individual corner radii to the same value.
| Thread safety | ReadSafe |
|---|---|
| Category | Individual Corners |
| Loaded/Saved | true |
History 16
- 721 Change ReadSecurity of BottomRightRadius from RobloxScriptSecurity to None
- 721 Change Category of BottomRightRadius from Data to Individual Corners
- 721 Change CanSave of BottomRightRadius from false to true
- 721 Change CanLoad of BottomRightRadius from false to true
- 721 Change Tags of BottomRightRadius from [Hidden, NotReplicated] to []
- 720 Change Tags of BottomRightRadius from [] to [Hidden, NotReplicated]
- 720 Change ReadSecurity of BottomRightRadius from None to RobloxScriptSecurity
- 720 Change Category of BottomRightRadius from Individual Corners to Data
- 720 Change CanSave of BottomRightRadius from true to false
- 720 Change CanLoad of BottomRightRadius from true to false
- 720 Change CanLoad of BottomRightRadius from false to true
- 720 Change CanSave of BottomRightRadius from false to true
- 720 Change Category of BottomRightRadius from Data to Individual Corners
- 720 Change Tags of BottomRightRadius from [Hidden, NotReplicated] to []
- 720 Change ReadSecurity of BottomRightRadius from RobloxScriptSecurity to None
- 713 Add BottomRightRadius
CornerRadius
| Type | Default | |
|---|---|---|
| UDim | 0, 8 | |
A convenience UDim property that acts as a shorthand for the four individual corner radius properties. Writing to this property sets TopLeftRadius, TopRightRadius, BottomRightRadius, and BottomLeftRadius to the same value. Reading this property returns the value of TopLeftRadius.
| Thread safety | ReadSafe |
|---|---|
| Category | Appearance |
| Loaded/Saved | true/false |
History 10
- 721 Change CanSave of CornerRadius from true to false
- 721 Change Tags of CornerRadius from [] to [NotReplicated]
- 720 Change Tags of CornerRadius from [NotReplicated] to []
- 720 Change CanSave of CornerRadius from false to true
- 720 Change Tags of CornerRadius from [] to [NotReplicated]
- 720 Change CanSave of CornerRadius from true to false
- 553 Change Default of CornerRadius from to UDim(0, 8)
- 486 Change ThreadSafety of CornerRadius from ReadOnly to ReadSafe
- 462 Change ThreadSafety of CornerRadius from to ReadOnly
- 435 Add CornerRadius
TopLeftRadius
| Type | Default | |
|---|---|---|
| UDim | 0, 8 | |
This property is currently in beta. To use it, enable New UI Capabilities in Studio's beta features window.
A UDim property that determines the radius of the top-left corner independently. Setting CornerRadius overwrites all four individual corner radii to the same value.
| Thread safety | ReadSafe |
|---|---|
| Category | Individual Corners |
| Loaded/Saved | true |
History 16
- 721 Change Tags of TopLeftRadius from [Hidden, NotReplicated] to []
- 721 Change ReadSecurity of TopLeftRadius from RobloxScriptSecurity to None
- 721 Change Category of TopLeftRadius from Data to Individual Corners
- 721 Change CanLoad of TopLeftRadius from false to true
- 721 Change CanSave of TopLeftRadius from false to true
- 720 Change Tags of TopLeftRadius from [] to [Hidden, NotReplicated]
- 720 Change ReadSecurity of TopLeftRadius from None to RobloxScriptSecurity
- 720 Change Category of TopLeftRadius from Individual Corners to Data
- 720 Change CanSave of TopLeftRadius from true to false
- 720 Change CanLoad of TopLeftRadius from true to false
- 720 Change ReadSecurity of TopLeftRadius from RobloxScriptSecurity to None
- 720 Change Category of TopLeftRadius from Data to Individual Corners
- 720 Change CanSave of TopLeftRadius from false to true
- 720 Change Tags of TopLeftRadius from [Hidden, NotReplicated] to []
- 720 Change CanLoad of TopLeftRadius from false to true
- 713 Add TopLeftRadius
TopRightRadius
| Type | Default | |
|---|---|---|
| UDim | 0, 8 | |
This property is currently in beta. To use it, enable New UI Capabilities in Studio's beta features window.
A UDim property that determines the radius of the top-right corner independently. Setting CornerRadius overwrites all four individual corner radii to the same value.
| Thread safety | ReadSafe |
|---|---|
| Category | Individual Corners |
| Loaded/Saved | true |
History 16
- 721 Change CanSave of TopRightRadius from false to true
- 721 Change ReadSecurity of TopRightRadius from RobloxScriptSecurity to None
- 721 Change Tags of TopRightRadius from [Hidden, NotReplicated] to []
- 721 Change Category of TopRightRadius from Data to Individual Corners
- 721 Change CanLoad of TopRightRadius from false to true
- 720 Change Tags of TopRightRadius from [] to [Hidden, NotReplicated]
- 720 Change ReadSecurity of TopRightRadius from None to RobloxScriptSecurity
- 720 Change Category of TopRightRadius from Individual Corners to Data
- 720 Change CanSave of TopRightRadius from true to false
- 720 Change CanLoad of TopRightRadius from true to false
- 720 Change CanLoad of TopRightRadius from false to true
- 720 Change Tags of TopRightRadius from [Hidden, NotReplicated] to []
- 720 Change ReadSecurity of TopRightRadius from RobloxScriptSecurity to None
- 720 Change Category of TopRightRadius from Data to Individual Corners
- 720 Change CanSave of TopRightRadius from false to true
- 713 Add TopRightRadius