I found a method to round certain ui corners using only built in roblox ui tools. It works by using a ui stroke and a ui gradient.
Steps
- add a ui stroke into the element you have your UI corner in.
- Set its thickness to 0.1
- Set its LineJoinMode to bevel,
- Add a UIGradient under the UIStroke
- edit its transparency curve (by clicking the … on transparency) and rotation depending on which corner(s) you want to not have rounded, examples bellow.
- Optional method to fix a bug with UI Corners
- Select the UI Frame that you are editing, press ctrl+c, then ctrl+shift+v. All this does is duplicate it inside of the Frame, then set the size to {1, 0}, {1, 0} and the position to {0.5, 0},{0.5, 0}, if the anchor point isnt 0.5, 0.5 then position it according to your anchor point, I recommend doing this twice. You can also optionally add another UIGradient inside of the duplicated object and this time edit its transparency curve and rotation so that its fully transparent on thee rounded corners, and not transparent on the non-rounded corner.
-
Why do this?
- This fixes an issue with ui corners where it gives the rounded corners a small 1px transparent border. This might be noticeable on backgrounds that aren’t of similar color to the element. All adding a UIGradient in the duplicated elements does is make it so that the rounded corners keep the same transparency on the edges of the curve, as duplicating it inside it self will essentially remove the softness of the corners. the examples are done without adding a UIGradient into the duplicated frame, and you might be able to see what doing it does.
Examples
(UIGradient curve is at the top)
Without duplicated frames
