Add a Bevel option to UICorner for non-rounded corners

Feature Requests Engine Features
,
1

As a Roblox developer, it is currently too hard to create non-rounded beveled corners on UI elements while still retaining the performance and simplicity of UICorner.

Currently, UICorner only supports smooth curvature, which makes it impossible to get sharp angled bevels (for example, 45 degree cuts, stepped edges, or multi-segment bevels) without manually using image assets, vector shapes, or layering multiple frames. This becomes especially limiting when trying to create consistent stylized UI across screen, surface, or billboard.

If this issue is addressed, it would improve my development experience because it would:

  • Much better stylistic choices in UI design without needing external images or complex layering
  • Have efficient, GPU-friendly bevel effects natively, improving performance over asset-based answers
  • Make corner transitions possible without re-creating UI objects
  • Have consistent visuals across platforms since bevels would render natively rather than relying on image scaling.

Use Cases

  1. Stylized Designs: Modern or industrial-themed games usually use angular UI panels, terminal windows, or scifi HUDs that need beveled corners to match the style of the game
  2. Accessibility: Bevels can give a super strong visual separation between elements without heavy shadows or gradients, which helps UI clarity in low-contrast color palettes
  3. Performance: Developers (like myself and multiple UI designers I’ve worked with) usually fake bevels using transparent images or multiple frames. A native solution would reduce draw calls and memory costs

Proposed Behavior

A new property on UICorner called CornerStyle, with the options:

Smooth: behaves as it does currently, using radius-based curvature.
Bevel: uses step-based angled corners instead of curved ones.

When Bevel is selected, a property called BevelSteps would appear

BevelSteps = 1 > a single 45 degree corner cut
BevelSteps = 2 > two 22.5 degree segments
BevelSteps = 3 > three 15 degree segments
and so on and so forth

Pictures taken from Blender:

image
image726×643 703 Bytes

image
image648×504 895 Bytes

image
image601×443 979 Bytes

image
image625×413 993 Bytes

Image 1: No UICorner
Image 2: UICorner with 1 Bevel Step
Image 3: UICorner with 2 Bevel Steps
Image 4: UICorner with 3 BevelSteps

By extending UICorner to include an option for beveling, Roblox would give developers a very powerful and lightweight tool for building more styled and professional-looking interfaces without relying on external art assets or complicated scripts

11 Likes
2

…just use UIStroke then…

2 Likes
3

this doesn’t work if you want to both have a UIStroke, and have the corners cut off at the same time. Some other good examples would be like, cutting the corners off an image label, or using this with canvas groups.

4

What about 9-Slicing?

https://create.roblox.com/docs/ui/9-slice

5

That isn’t necessarily a perfect solution either, and like @GunsForGuns34 said, you can’t have multiple UIStrokes with say a transparent background (though with the new UIStroke beta feature, it could be possible, but still, a little too difficult for any good results.)

6

9-Slicing works but it still requires images to be uploaded, that’s why the first sentence doesn’t say impossible, but rather just too hard to do. :confused: