UICorner is great but has it’s shortcomings, as it always applies rounding to all four corners. As a developer, I want to be able to disable each corner individually. I’ll outline an issue I come across often with UICorners:
The “Stock” text is a grey TextLabel, using a UICorner here to match the top two corners to the curve of the button.
There is a workaround here, just make another frame to cover the bottom corners!
But as you can see, it doesn’t work too well for TextLabels:
Unfortunately to get the desired result, you have to restructure the label completely. In this example I made a new Frame with a UICorner, then parented my TextLabel and the Corner cover frame underneath it.
It turns out just fine, but this step alone just adds so much more friction to developing UI.
Because this workaround requires overlapping UI elements, you cannot use any type of transparency or gradient here.
(from the selected frames, I set Frame and CornerFrame to both have BackgroundTransparency of 0.5)
If Roblox were to address this issue, UI can be made at a much quicker rate and be easier to maintain in the future when changing it around.
One current option to do this, rather than adding extra frames, is just having one outer transparent frame with ClipsDescendants on with a second frame inside it, and then applying the UICorner to the inner frame. This allows you to resize and move the inner frame to get the desired effect.
This is a great idea but I don’t like the idea that you can’t change the Radius of each individual one instead of it just not applying to that corner. Maybe have it something like:
i am begging all gods of roblox engineering please make this a thing
i was in a process of making a transparent inventory hotbar
i quickly found out that i either needed to switch ZIndexBehaviour to Sibling (in order to use CanvasGroups) or that i needed to use images which (big surprise) don’t match the rest of the ui
This is probably not going to be added because of backwards compatibility.
There would be 5 properties:
CornerRadius: UDim
TopLeftRadius: UDim
TopRightRadius: UDim
BottomLeftRadius: UDim
BottomRightRadius: UDim
Setting CornerRadius would set all the corners to the same thing. Getting CornerRadius would return what you just set it to. But, what if you set each corner indiviually? What should CornerRadius return? The average? The biggest, or smallest? The most recent? A specific corner?
Maybe instead the solution is to have a property which enables the four corner editing, or maybe an UIAdvancedCorner or UIBorder or something dumb like that, to control each corner radius.
I think it might be something like other properties or like when you make PartocleEmotters where the colour can change gradually and the text is strange
Issue with CanvasGroups is it renders as an image thus reducing the overall quality of the Interface, The thing I hate about roblox the most whenever they do something right they completely screw up something else and this is one of those cases.
The image has been compressed by Discord and Discourse (twice) at this point so what I’m trying to say might not be very clear, but the text quality is very obviously lower than it should be. If I remember in the morning, I’ll show a comparison, but the point is that having 2 CanvasGroups inside of each other will degrade the quality by a lot.
Bump. I’ve been wanting this ever since UICorner was introduced. There’s so many situations in UI design where you’d only want some of the corners rounded.
This is an old menu I made that would benefit from this:
Also, Roblox can impliment a solution where just typing the number of BorderRadius inside without fully completing it, Roblox can automatically fill it in similar to AnchorPoint where as you can simply type “0.5” to make it “0.5, 0.5”. However, AnchorPoints use Vector2.new() so there could be a slight difference.
Further more, Roblox can add a RelativeTo property where ScaleBorderRadius will act upon, such as:
XY (Normal)
XX (Y will be replcaed with X scale)
YY (X will be replaced with Y scale)
YX (Normal Inverted)
RelativeTo is a simpler way to not use AspectRatios for Frames.
What if Roblox added a property that lets you choose between them? Ability to change all at once or individual corner?
Code may look like this:
if script.Parent.CornerUI.BorderRadiusType == Enum.BorderRadiusType.Individual then
return script.Parent.CornerUI.TopLeftCornerRadius
elseif script.Parent.CornerUI.BorderRadiusType == Enum.BorderRadiusType.Combined then
return script.Parent.CornerUI.CornerRadius
end
Yes, but judging the circumstances of extra added properties it would be common to use Udim2.new(), currently no, you’re right, you cannot use Udim2.new() on the current CornerUI.
