WPF MediaElement with rounded corner

Question

In WPF, i wish to create rounded corner for my movie, but the movie actually will overlap the border and i get a normal rectangle box that load my movie. Any idea how to solve this issue?

<Border BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="20,20,20,20">
    <Grid>
        <MediaElement x:Name="movieLoader" HorizontalAlignment="Left" Height="128" VerticalAlignment="Top" Width="236" Source="../video/empty.mp4"/>
    </Grid>
</Border>

Answer 1

Try this:

<Border x:Name="border" BorderThickness="1" BorderBrush="#FF000000" CornerRadius="20" Padding="1"
        HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid>
        <Border Name="mask" Background="White" CornerRadius="{Binding ElementName=border, Path=CornerRadius}"/>
        <Grid>
            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=mask}"/>
            </Grid.OpacityMask>
            <MediaElement x:Name="movieLoader" HorizontalAlignment="Left" Height="128" 
                          VerticalAlignment="Top" Width="236" Source="../video/empty.mp4"/>
        </Grid>
    </Grid>
</Border>

Answer 2

Set ClipToBounds to True.

<Border ClipToBounds="True" BorderBrush="#FF000000" BorderThickness="1"
    CornerRadius="20">
    <Grid>
        <MediaElement x:Name="movieLoader" HorizontalAlignment="Left"
            Height="128" VerticalAlignment="Top" Width="236"
            Source="../video/empty.mp4"/>
    </Grid>
</Border>