Individual UI Corner Adjustment

[eIiphant]

The Problem

Currently, when making UIs, there is only the ability to create uniform corners on all edges of a selected object, what I am proposing is simple, which is individual corner adjustment.

The Solution

An option could be added, to allow for this, and the current workflow could be retained, an example of this is in Figma.

Uniform corner size looks like this:

Mixed corner size looks like this:

This allows the end user to produce UIs that look like this:

Conlusion

With this feature added, it would allow for easier creation of designs like this without using extra frames, that when combined with UIGradients or images, do not match up correctly.

Thank you for taking the time to read my feature request!

[KaviStudios (Kavi)]

This needs to be added. It’s hard to make a UI with corners with diffrent corner radius.

[desinied]

Support this feature, I don’t want to use some hacky trick to achieve a feature that should be native.

[hoontee]

What would implementation look like? EnabledCorners property?

[HeyWhatsHisFace]

They could probably create additional corner properties.

CornerRadius UDim
+CornerRadiusTopLeft UDim
+CornerRadiusTopRight UDim
+CornerRadiusBottomLeft UDim
+CornerRadiusBottomRight UDim

Then any corner-specific radius will override that corner. For example:
CornerRadius = (0.2,0), CornerRadiusTopRight = (0,0) would have a sharp top right corner.

CornerRadius = (0,0), CornerRadiusBottomLeft = (0.2,0) would have a rounded bottom left corner.

Logically, the engine would only apply the specific corner if that corner’s value is different than the base CornerRadius value.

A simple way they could do it is by completely ignoring the CornerRadius property (defaulting to sharp corners) if any of the specified corners have a value. That way the UI’s corners just reflect the specified ones only.

Example

CornerRadius = (0.7,0) --(Ignored)
CornerRadiusTopLeft = (0,0)
CornerRadiusTopRight = (0.1,0)
CornerRadiusBottomLeft = (0,0)
CornerRadiusBottomRight = (0.1,0)

Would look like this:

For an overly complicated way to do it, they could make CornerRadius a reactive property that when modifying it through a script or directly in the property window, it could change all the corner-specific radii to the same value if they match.

Example

--Changing CornerRadius Scale to 0.5.
CornerRadius = (0.1,0) 				-> CornerRadius = (0.5,0) 	
CornerRadiusTopLeft = (0.1,0)		-> CornerRadiusTopLeft = (0.5,0)  --(Automatic Change)
CornerRadiusTopRight = (0.1,0)		-> CornerRadiusTopRight = (0.5,0)  --(Automatic Change)
CornerRadiusBottomLeft = (0.3,0)	-> CornerRadiusBottomLeft = (0.3,0)
CornerRadiusBottomRight = (0.1,0)	-> CornerRadiusBottomRight = (0.5,0)  --(Automatic Change)

--Changing CornerRadius Scale to 0.7.
CornerRadius = (0.2,0) 				-> CornerRadius = (0.7,0) 	
CornerRadiusTopLeft = (0.2,0)		-> CornerRadiusTopLeft = (0.7,0) --(Automatic Change)
CornerRadiusTopRight = (0.2,0)		-> CornerRadiusTopRight = (0.7,0) --(Automatic Change)
CornerRadiusBottomLeft = (0.2,0)	-> CornerRadiusBottomLeft = (0.7,0) --(Automatic Change)
CornerRadiusBottomRight = (0.2,0)	-> CornerRadiusBottomRight = (0.7,0) --(Automatic Change)

--Changing CornerRadius to (0.2,25).
CornerRadius = (0.1,0) 				-> CornerRadius = (0.2,25) 	
CornerRadiusTopLeft = (0,25)		-> CornerRadiusTopLeft = (0,25)
CornerRadiusTopRight = (0.1,0)		-> CornerRadiusTopRight = (0.2,25) --(Automatic Change)
CornerRadiusBottomLeft = (0,0)		-> CornerRadiusBottomLeft = (0,0)
CornerRadiusBottomRight = (0.1,15)	-> CornerRadiusBottomRight = (0.1,15)

and changing a specific corner would have no effect on the base CornerRadius unless all are uniform:

--Changing CornerRadiusTopRight to (0.3,10).
CornerRadius = (0.1,0) 				-> CornerRadius = (0.1,0)	
CornerRadiusTopLeft = (0.1,0)		-> CornerRadiusTopLeft = (0.1,0)
CornerRadiusTopRight = (0.1,0)		-> CornerRadiusTopRight = (0.3,10)
CornerRadiusBottomLeft = (0.1,0)	-> CornerRadiusBottomLeft = (0.1,0)
CornerRadiusBottomRight = (0.1,0)	-> CornerRadiusBottomRight = (0.1,0)

--Changing every specific corner to to a unique value.
CornerRadius = (0,0) 				-> CornerRadius = (0,0)	
CornerRadiusTopLeft = (0,0)			-> CornerRadiusTopLeft = (0,10)
CornerRadiusTopRight = (0,0)		-> CornerRadiusTopRight = (0,15)
CornerRadiusBottomLeft = (0,0)		-> CornerRadiusBottomLeft = (0.1,0)
CornerRadiusBottomRight = (0,0)	-> CornerRadiusBottomRight = (0.2,0)

--Changing every specific corner to (0.3,10).
CornerRadius = (0,0) 				-> CornerRadius = (0.3,10) --(Automatic Change)
CornerRadiusTopLeft = (0.2,0)		-> CornerRadiusTopLeft = (0.3,10)
CornerRadiusTopRight = (0.45,25)	-> CornerRadiusTopRight = (0.3,10)
CornerRadiusBottomLeft = (0.2,5)	-> CornerRadiusBottomLeft = (0.3,10)
CornerRadiusBottomRight = (0,10)	-> CornerRadiusBottomRight = (0.3,10)

and trying to change CornerRadius while having unique corners could give a warning in the output:

--Changing CornerRadius to (0.5,0) while having unique specific corner values.
CornerRadius = (0,0) 				-> CornerRadius = (0.5,0) 
CornerRadiusTopLeft = (0,25)		-> CornerRadiusTopLeft = (0,25)
CornerRadiusTopRight = (0.1,15)	-> CornerRadiusTopRight = (0.1,15)
CornerRadiusBottomLeft = (0,5)		-> CornerRadiusBottomLeft = (0,5)
CornerRadiusBottomRight = (0.2,0)	-> CornerRadiusBottomRight = (0.2,0)
[[Studio Warning: CornerRadius change is not visualized. Remove directional corner values to use CornerRadius.]]

That’s just how I would think about it. No idea if either of those ideas are feasible.

[KinderDev (Kinder)]

Unfortunately this isn’t possible in default Roblox, though sometimes I achieve the same affect by using two frames like so:

[SillyMeTimbers (Silly)]

Thats kind of the point of feature request, to request features we’d like to see possible in default roblox…

[jake_4543 (Jakey)]

This would be great, atm having it affect all corners makes some ui just look janky and then you have to do a hacky workaround.

[LovreDev]

That’s kind of unreliable and hacky depending on the element and its easier to get an actual improvement to uicorner