fix rounded borders on buttons (#13541)

# Objective

- #13523 introduced a new bug on rounded corners in UI on buttons
- there are artefacts outside of the border, and the text in buttons is
more gray than it should be
- example `color_grading`:

<img width="1280" alt="Screenshot 2024-05-27 at 22 19 13"
src="https://github.com/bevyengine/bevy/assets/8672791/fbb6a8ba-2096-4fcc-9c94-3764e9d16d2f">

## Solution

- Clamp alpha to be between 0.0 and 1.0

<img width="1280" alt="Screenshot 2024-05-27 at 22 18 19"
src="https://github.com/bevyengine/bevy/assets/8672791/295d8e16-30eb-40cc-8d61-4995fca6dded">

Author: mockersf

crates/bevy_ui/src/render/ui.wgsl

@@ -158,7 +158,7 @@ fn draw(in: VertexOutput) -> vec4<f32> {
     let t = select(1.0 - step(0.0, border_distance), antialias(border_distance), external_distance < internal_distance);
 
     // Blend mode ALPHA_BLENDING is used for UI elements, so we don't premultiply alpha here.
-    return vec4(color.rgb, color.a * t);
+    return vec4(color.rgb, saturate(color.a * t));
 }
 
 fn draw_background(in: VertexOutput) -> vec4<f32> {
@@ -168,7 +168,7 @@ fn draw_background(in: VertexOutput) -> vec4<f32> {
     // When drawing the background only draw the internal area and not the border.
     let internal_distance = sd_inset_rounded_box(in.point, in.size, in.radius, in.border);
     let t = antialias(internal_distance);
-    return vec4(color.rgb, color.a * t);
+    return vec4(color.rgb, saturate(color.a * t));
 }
 
 @fragment