UI Corner Outline Workaround

Resources Community Tutorials
#1

Introduction

As it stands, one of the most impactful limitations of the UI Corner is the fact that you can no longer create borders for your UI objects when using the UI corner.

Using this method, you can circumvent this.

Disclaimer

This method involves creating two frames and using two UI Corners.

Therefore, every time you use this method, you are effectively doubling your UI element count.

If you use this method on twenty frames, you now have forty, etc.

According to the original announcement post, borders were disabled when used in conjunction with UI corners because of performance issues. This method is mainly for people who need a workaround. I have been able to use this method on about a hundred visible, enabled frames before the performance impact became noticeable; frame drop, noticeably higher memory usage, etc.

Now then, onto the method.

Process

  1. Add a ScreenGUI in StarterGUI.
  2. Add a Frame to this ScreenGUI.
  3. Insert a UI Corner into the Frame.

This Frame will be our outer frame and shall act as the border.

  1. Duplicate this outer frame via Right Click → Duplicate.
  2. Set the color of this duplicate to something other than the color of the outer frame.
  3. Set the parent of this duplicate to the outer frame.
  4. Re-size the duplicate to be smaller than the outer frame.
  5. Go to the properties of this duplicated frame, find Anchor Point.
  6. Set the X and Y Anchor Point to 0.5.
  7. Find the position property of the duplicated frame.
  8. Click the box to the right of the position property, and set the position to be: {0.5, 0},{0.5, 0}.

Final Result:

image

Advanced

I won’t be giving a step-by-step walkthrough, but if you’re interested, here are some advanced methods that add to the method I described above.

Consistent Border Corner Size

If you’d like to make the border size the same size as the border for the corners, you can calculate how many pixels the gap between the inner frame and the outer frame is, then change the inner frame’s UI Corner size accordingly. E.g., if the gap was four pixels, and the UI Corner’s size for the larger frame was twelve, then the inner frame’s UI Corner’s size should be eight.

Pixel-Perfect Borders

If you want the border for an element to always be one size regardless of device, E.g., the border for an element should be two pixels, then simply make the inner frame’s size in scale one in both X and Y, and the Offset to be negative two. This scales the element, while always ensuring the border is two pixels.

I hope this helped and was substantial enough for this topic.

19 Likes
How Do I Outline This UI after using UIcorner
I'm having a problem when I'm making borders
#2

I’ve created a script you can paste in the command bar after editing it to your liking to make this process faster without clicks:

The one described by the tutorial 
local targetFrame = game.StarterGui.ScreenGui.Frame -- example, edit
local targetScale = UDim2.new(0, 0, 0, 0) -- edit
local newColor = Color3.fromRGB(0, 0, 0) -- Color3 value, edit
local desired_Parent = targetFrame -- edit

local clone = targetFrame:Clone()
clone.AnchorPoint = Vector2.new(0.5, 0.5)
clone.Position = UDim2.fromScale(0.5, 0.5)
clone.Size = targetScale
clone.Parent = desired_Parent
7 Likes