Corner Radius Different Between Platforms

[bradencohen]

Hello! I just wanted to post this here to make sure I wasn't missing something before filing a bug.

I'm building against MAUI version 8.0.0-preview.7.8922 & attempting to create a 'Pill' control that displays a label in a nicely rounded container.

Example:

I figured my best way of accomplishing this was using Border.

That's when I began to notice pretty obvious differences between the iOS and Android rendering.

Take the following XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestMauiApp2.MainPage"
             xmlns:local="clr-namespace:TestMauiApp2">
    <Grid>
        <Border BackgroundColor="Orange"
                WidthRequest="72"
                HeightRequest="30">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="15" />
            </Border.StrokeShape>

            <Label Text="Pill" 
                   HorizontalOptions="Center"
                   VerticalOptions="Center" />
        </Border>
    </Grid>
</ContentPage>

Setting the Border height to 30 and corner radius to 15, you would think I accomplish the perfect rounding of the edges.

iOS Rendering

The corners seem to be rounded right, but I would give some bonus points if you could tell me why the inner content is getting clipped.

Android Rendering

The corner radius seems to be completely wrong, but the content isn't getting clipped.

Can anyone shine some light on the differences between these two platforms? Any help would be much appreciated. Thanks!

[bradencohen]

Update after a little bit of testing, it seems like any Corner Radius supplied to the Border on Android is significantly less than the Corner Radius on iOS (visually).