UWP border rendering issue

Question

Either I'm going crazy or borders with a corner radius do not render correctly in UWP. Take this extremely simple example:

<Border CornerRadius="6" BorderBrush="Blue" BorderThickness="1">
     <Rectangle Fill="Black"   />
</Border>

And see how the rectangle extends slightly beyond border:

This happens in the designer in the visual studio and when the app is running.

It only seems to happen when there is a borderthickness >0 on the border.

Any idea why this happens?

Any updates on this issue? This seems like a very weird thing for Microsoft to overlook and seems to be an issue for years now. — nreh, Jan 09 '22 at 02:24

score 0 · Answer 1 · answered Feb 27 '19 at 10:14

0

If you are looking to apply corner radius to rectangle. Its better to use RadiusX and RadiusY properties of rectangle. Using like this will not cause any issues in rendering.

<Rectangle Width="100" RadiusX="10" RadiusY="10" Height="60" Stroke="Red" StrokeThickness="2" Fill="Black" > </Rectangle>

answered Feb 27 '19 at 10:14

Vignesh

1,824
2
10
27

1

Sure, I was just using rectangle as a demostration, it happens with all content. thanks – Martin Richards Feb 27 '19 at 10:37
Any specific example on other content ?? – Vignesh Feb 27 '19 at 11:25
1

Literally any content causes the same issue. The border does not clip its contents properly is the issue. – Martin Richards Feb 27 '19 at 11:32

score 0 · Answer 2 · answered Jan 09 '22 at 02:45

I managed to find a rather annoying solution by just using two borders. One with the correct border radius and style, and a second border within in for fine tuning the corners that kept clipping through.

I noticed the issues were mostly in the upper left and right corners and it was fixed by altering the corner radius of the inner border and padding of the outer border.

Source: https://stackoverflow.com/a/61468325

UWP border rendering issue

2 Answers2