How to add individual rounded corners on an Image Control

Question

I'm having issues on how i can individually set the corners of an Image Control (or any control that is inside the Window Control). Using <Border> tags adds another pixel or border inside the outer border which is the opposite of what i want - the outer and inner border should merge where it would overlap.

I've tried which does give me individual corner sizes. However, it adds another layer of border under the outer border - which i would rather that it overlaps/merges with the outer layer so that i stays its thickness size. Trying <Image.Clip> for <Image> Controls however, does not give me freedom to modify individual corners.

Below code is using <Image.Clip> under <Image> Control which produces the above result:

<Border CornerRadius="10" BorderBrush="White" BorderThickness="1">
    <Canvas Background="Transparent">
        <!--Acrylic Background-->
        <Rectangle
            Fill="White" Opacity="0.4"
            Height="400" Width="600">
            <Rectangle.Clip>
                <RectangleGeometry Rect="0,0,600,400" RadiusX="9" RadiusY="9" />
            </Rectangle.Clip>
        </Rectangle>

        <Image Height="200" Width="400" Source="D:\_\Downloads\shutterstock_389224732-1200x627.jpg" RenderTransformOrigin="0.5,0.5" Canvas.Left="-100" Canvas.Top="100" Stretch="Fill">
            <Image.Clip>
                <RectangleGeometry Rect="0,0,400,200" RadiusX="10" RadiusY="10" />
            </Image.Clip>

            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="90"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Canvas>
</Border>

Below code is using wrapped around Control (for example) which produces the above result:

<Border CornerRadius="10" BorderBrush="White" BorderThickness="1">
    <Canvas Background="Transparent">
        <!--Acrylic Background-->
        <Rectangle
            Fill="White" Opacity="0.4"
            Height="400" Width="600">
            <Rectangle.Clip>
                <RectangleGeometry Rect="0,0,600,400" RadiusX="9" RadiusY="9" />
            </Rectangle.Clip>
        </Rectangle>

        <Border CornerRadius="9,0,0,9" BorderBrush="Red" BorderThickness="1">
            <Canvas Height="398" Width="198">

            </Canvas>
        </Border>
    </Canvas>
</Border>

Notice below zoomed results from both Code A and B:

It shows that <Image.Clip> automatically rounds all four corner (top left, top right, bottom left, bottom right) without adding additional border pixel. While with <Border> i have freedom to manually choose which corners to round (top left, bottom left) but it adds another pixel of border (as you see White and Red Pixels).

I am looking for the functionality of <Image.Clip> but the freedom to manually select which corners to clip while also not adding an additional pixel of corner as i am trying to achieve below UI:

So technically, i am trying to clip only the top left and bottom left corner of the image to match that of the left side of the window.

Cheers!

Answer 1

 <Grid
        Width="400"
        Height="600"
        Margin="0,0,0,0"
        HorizontalAlignment="Left"
        VerticalAlignment="Top">

        <!--  Add rounded corners here  -->
        <Border
            Name="Mask"
            Grid.RowSpan="2"
            Margin="-5"
            Background="Black"
            CornerRadius="18 0 0 18" />

        <!--  Image  -->
        <Grid Grid.RowSpan="2">
            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=Mask}" />
            </Grid.OpacityMask>

            <Image
                Margin="-5"
                Source="{StaticResource UsmanImageSource}"
                Stretch="UniformToFill" />
        </Grid>

    </Grid>