UICorner With Borders

Help and Feedback Art Design Support
,
#1

Hey!

I’m a beginner UI Designer, and I’m working on some simple UI.

I have a pretty simple question. How do you add a border to rounded UI? I’ve done some research on this, but I haven’t found anything yet.

image

The one on the left is made using UIStrokes, while the one on the right is done without using UIStrokes. I’m trying to recreate it without using UIStrokes.

I think you can see the problem here. Even though I’ve positioned the inner frame to be at the middle of the outer frame, it offsets the position for some reason. The inner frame’s Anchor Point is 0.5, 0.5 and the position is 0.5, 0, 0.5, 0.

Any help is appreciated. Thanks for taking the time to read this!

1 Like
#2

One thing you can do is simply recreate it in a photo editing tool like paint.net or Photoshop and upload it to Roblox.

1 Like
#3

Is there anyway you can do it on Roblox? Or is that the best method? I’ve never really used any photo editing software.

1 Like
#4

UIStroke is a method, however UIStroke is still in beta and does not appear/work outside of studio.

1 Like
#5

It should work fine just by setting the UICorner radius of both frames to the same value (that is, if you’re using scale for your corner radius and not offset). I was able to do so using two frames with identical UICorner instances, and the nested frame using the same AnchorPoint/Position properties you mentioned:

Alternatively if you want to use offset to set your UICorner radius parameters you can set the nested frame’s corner radius to the parent frame’s radius multiplied by the scale size of the nested frame. For example, if your parent frame (dark blue/purple) has a UICorner radius of {0, 24}, and your nested frame (light blue) is set to a size of {0.9, 0}, {0.9, 0}, your nested frame’s UICorner radius should be {0, 24*0.9}.

Overall it’d probably be better to just use UIStroke imo but if you’re looking to use a nested frame instead I don’t see any reason why setting the parameters in this way wouldn’t work.

1 Like
#6

Yep, that’s why I’m looking for a different method.

1 Like
#7

Hey! I tried using scale instead of offset like you mentioned, but it still offsets the position of the inner frame.

The corner radius of both frames is 0.37, 0.

image

1 Like
#8

If your testing the game using the built in device emulator, make sure you set it to be on resolution. That could be what causes it to look like that. Otherwise, I’m not too sure

1 Like
#9

The only time I’ve noticed issues like that happening are when I have the device emulator enabled (like @iGiDgames mentioned) and the scaling mode set to “Fit to Window” (if you do, try turning off the device emulator and seeing how it looks). Otherwise, I’m not exactly sure what would be causing a one pixel offset like what you’re seeing.

1 Like
#10

Oh I see, that might be the problem. Thanks for letting me know @iGiDgames and @The_Sink !

1 Like