I'm programing a GUI library in openGL and decided to add rounded corners because I feel like it gives a much more professional look to the units.
I've implemented the common

```
length(max(abs(p) - b, 0.0)) - radius

```

method and it almost works perfectly except for the fact tat the corners seems as though they are stretched:

[![enter image description here](https://i.stack.imgur.com/yjbhz.png)](https://i.stack.imgur.com/yjbhz.png)

My fragment shader:

```
in vec2 passTexCoords;

uniform vec4 color;
uniform int width;
uniform int height;
uniform int radius;    

void main() {
    fragment = color;

    vec2 pos = (abs(passTexCoords - 0.5) + 0.5) * vec2(width, height);

    float alpha = 1.0 - clamp(length(max(pos - (vec2(width, height) - radius), 0.0)) - radius, 0.0, 1.0);

    fragment.a = alpha;
}

```

The stretching does make sense to me but when I replace with

```
vec2 pos = (abs(passTexCoords - 0.5) + 0.5) * vec2(width, height) * vec2(scaleX, scaleY);

```

and

```
float alpha = 1.0 - clamp(length(max(pos - (vec2(width, height) * vec2(scaleX, scaleY) - radius), 0.0)) - radius, 0.0, 1.0);

```

(where scaleX and scaleY are scalars between 0.0 and 1.0 that represent the width and height of the rectangle relative to the screen) the rectangle almost completely disappears:

[![enter image description here](https://i.stack.imgur.com/7k8Yg.png)](https://i.stack.imgur.com/7k8Yg.png)