UI Shader (2D)

In this shader code:

The border_width uniform controls the width of the border.

The corner_radius uniform sets the radius of the rounded corners.

The border_color uniform specifies the color of the border.

To use this shader in Godot:

Create a new CanvasItem shader in the Godot editor.

Copy and paste the shader code into the shader editor.

Assign the shader to the material of the 2D node you want to apply the border to.

Adjust the border_width, corner_radius, and border_color parameters in the shader properties to customize the appearance of the border.

This shader will create a flat border UI box with rounded corners on a 2D canvas item, allowing you to easily customize the width, corner radius, and color of the border.

Shader code

shader_type canvas_item;

uniform float border_width : hint_range(0.0, 100.0) = 5.0;
uniform float corner_radius : hint_range(0.0, 50.0) = 10.0;
uniform vec4 border_color : hint_color = vec4(1.0, 1.0, 1.0, 1.0);

void fragment() {
    vec2 size = vec2(1.0, 1.0) - 2.0 * border_width / SCREEN_PIXEL_SIZE;
    vec2 uv = UV * size;

    float dist = length(max(abs(uv) - size + corner_radius, 0.0));
    float border = smoothstep(0.0, border_width / SCREEN_PIXEL_SIZE, dist);

    COLOR = mix(COLOR, border_color, border);
}