Way to create a border around a Panel frame

So I might be going about this in the wrong manner, but I can’t see to create a border around a 2D Panel like below.

What you see below is an image with a left border that is supposed to take up the right hand side. When I change the resolution of the project from 16 x 9 to anything else (Free Aspect, etc.) it causes that deformation as you see. (I’m using Shapes2D to create the boxes and using panels.)

Is there anyway to create a border for one or more sides of a panel or other square box without turning the whole thing into a rectangle? Or is using Images and image sprites the only way that this is possible?

Imgur

Panels are just images, nothing fancy or special. They just add a default to it.

So in your regard, the best thing to do is first of all make sure you scale by aspect ratio for UI elements. Here is how I would “create” a border. With a fancy custom slider!

  [range(0,1)]
public float outlinePercentage;

  void CreateOutline(){
 Transform backgroundOutline = Instantiate(outlinePrefab, whateverPos, Quaternion.Euler.Identity) as Transform; 



 backgroundOutline.localScale = Vector3.one * (1 - outlinePercentage);

}

The last line just multiplies by the neat public float slider we made. So assumably if you crank that down, you’d create a border procedurally.

So the “outline” here is what is essentially masking your border. So lets say you set it at .85% and put white behind it, you would have that thick of a white background behind it, scaled to your UI. Bam!

Not really sure if I really understood what you tried to say, but:

  • You could try to add a canvas scaler component to your canvas and set the UI Scale mode to scale with screen size, set a reference resolution and the screen match mode to match width or height.
    For example I tend to set 1080x1920 fro my mobile projects.

  • You can also add one of the Layout components (grid, vertical, horizontal) to distribute your elements and set a padding.

Hope I’ve helped!