UICorner Individual Corners

Feature Requests Engine Features
#1

As a Roblox developer, it is currently too hard to make corners for individual corners with UICorner.

I know that this can be worked around using PhotoShop, Pixlr, or something else, but that’s beyond the point.

What I think we need is to be able to customize the sides that corners apply to.
How this could work (sorry about the missing checkbox for the top one)
image
Making it so you can check if you want to have that side cornered.

Currently, the only workaround is either using tiny frames to make corners, which takes a lot of time, or uisng a photo editing service to make the frame, but that also takes time, and you have to wait for moderation, and some players might have the image not load.

If Roblox is able to address this issue, it would improve my development experience because we would be able to customize what sides a UICorner would apply to

Use Cases:

- Banners

Currently, Banners are very hard to get right.

Say you have a UI that looks like this
image

As you can see, there’s corners at the bottom, but we dont want that.
What you could do this this:
image
But, that’s bad for many reasons

  • Nonetheless it’s still another UI element, using up more GPU and memory.
  • These are pretty hard to get right, and most of the time it off centers your content

image

  • If you have a transparent GUI, you’re screwed.

image

- Make UI more custom

Making the top part from Studio alone was extremely hard to create, because I wanted it to have that corner in the right.
I had to:

  • make 2 frames
  • make a frame to cover up the corners on the far left
  • make a frame to cover the top right corner of the bottom bar
  • make a frame to cover the top of the top bar

All of that is way too much for making something so simple.

If Roblox were to add this, it would greatly improve my experience and allow more usage out of UICorner.

152 Likes
#2

I would love this as well as there’s many objects I’ve created where I’d like to only apply corners in certain parts of it, like for a banner on the top of a curved object. There are workarounds for simpler approaches, like the one shown below, but having this be an option we can toggle would greatly speed up my workflow.

image

image

The only two workarounds I know of currently…

  • Insert a UICorner into a frame, and a frame inside of that which covers any corners you don’t want. This used to be limited to non-transparent frames before the beta release of CanvasGroups.
    Downside: Dirty method; possibly less efficient memory-wise

  • Use an image for corners instead of UICorner, either with an individual image for each corner, one corner with the image flipped/reversed (using offset/size), or the 9-slice editor over a fully cornered object.
    Downside: May not be as sharp as in-engine; not as flexible; takes more time to set up

21 Likes
#3

That’s mainly the reason I’m requesting this - banners!

Currently good looking banners are pretty hard to do because of those reasons you stated, and take a long time to try and complete.

7 Likes
#4

I would love this feature.

Would prefer having a number control each corner instead of a toggle, though.

17 Likes
#5

A number for each might be complex unless they add a Master control, because I dont want to type “8” 4 times or type “8,8,8,8” instead of just one eight. Still a good idea

4 Likes
#6

Per-corner radius is standard in things like CSS. Not wanting to type a few numbers is a nonissue. This would be implemented most likely as a radius for each corner if it’s implemented at all (if Roblox is able to support variable corner radius on a technical level).

13 Likes
#7

CSS Does it like this:

.element {
border-radius=8px; /*All borders now have 8px corners */
bottom-right-boder-radius=0px; /* Now all corners have 8px besides the bottom right
}

I think if they dont do an “applys to” property then the CornerRadius might start accepting “8,8,8,8”

4 Likes
#8

border-radius: 8px 50px 2px 0px;

Also, it’s not your job to judge whether or not something will “take forever to do”, you have no technical intuition on this whatsoever so it’s meaningless to speculate. It’s your job to identify problems so that Roblox can produce their own solutions that satisfy the majority.

14 Likes
#10

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.
image

There is a workaround here, just make another frame to cover the bottom corners!

image
image713×419 30.9 KB

But as you can see, it doesn’t work too well for TextLabels:
image

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.
image
image

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)
image

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.

29 Likes
#11

I went ahead and added some use cases for this

3 Likes
#12

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.

5 Likes
#14

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:

TopLeftCornerRadius: 8 --[[ Pixel ]] , 0 --[[ Scale ]]
BottomLeftCornerRadius: 0, 0
TopRightCornerRadius: 8, 0
BottomRightCornerRadius: 0, 0

3 Likes
#15

Generally that would slow you down if you wanted to have it all be something like 18.

1 Like
#16

It would be great with a master Radius being the normal: CornerRadius: UDim. While also having the 4 individual corners.

TopLeftCornerRadius: UDim
BottomLeftCornerRadius: UDim
TopRightCornerRadius: UDim
BottomRightCornerRadius: UDim

Meaning the normal CornerRadius would set all of them, and the individual ones being used if needed.

9 Likes
#17

Adding on to this,

I think the same could go for UIStrokes. I’d like to have individual control over those too.,

2 Likes
#18

Just giving this a bump because I find it simply incomprehensible how such a basic, yet critical feature is still not available.

9 Likes
#19

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

in the end, you feel nothing but frustration

4 Likes
#20

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.

1 Like
#21

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

2 Likes
#22

This can be achieved with CanvasGroups with UI corners. they clip ALL descendants even on the corner.

1 Like