WPF : Rounded-Corners Images

You can define a <Border/> element and set its <Border.Background/> property to an <ImageBrush/> , set the Borders CornerRadius property and you are all set!

<Border CornerRadius="8,0,8,0">
    <Border.Background>
        <ImageBrush Stretch="Fill" ImageSource="ImageSource"/>
    </Border.Background>
</Border>

None of the above answers worked for me completely. I was trying to implement rounded corners on image which could be resized and has properties Stretch="UniformToFill" VerticalAlignment="Center" and HorizontalAlignment="Center". The center alignments keeps the middle part cropped as opposed to bottom and right side being cropped, when image is resized. Solutions with image brush were working but I was facing problem in keeping the content at center cropped.

The marked answer has a problem with transparent non rectangular images as the "mask" border will end up showing as white background. Following was the imlementation which worked for me:

<Grid>
    <WrapPanel Name ="container">
        <Image Source="sample_image.png" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="UniformToFill"/>
        <WrapPanel.OpacityMask>
            <VisualBrush >
                <VisualBrush.Visual>
                    <Border Height="{Binding ElementName=container, Path=ActualHeight}" 
                            Width="{Binding ElementName=container, Path=ActualWidth}"
                            Background="White" CornerRadius="15" />
                </VisualBrush.Visual>
            </VisualBrush>
        </WrapPanel.OpacityMask>
    </WrapPanel>
</Grid>

in wpf this one works for me

    <Ellipse Width="50" Height="50">
        <Ellipse.Fill>
            <ImageBrush ImageSource="http://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg" />
        </Ellipse.Fill>
     </Ellipse>

You forgot the Grid that makes the mask and the image siblings and nested the image in the mask. and you forgot to set the background of the mask.

This works:

<Grid>
    <Border Canvas.Left="55"
            Canvas.Top="30"
            Width="100"
            Height="Auto"
            Margin="12,12,8,0"
            VerticalAlignment="Top"
            BorderBrush="#FF3B5998"
            BorderThickness=".5"
            CornerRadius="18">
        <Border.Effect>
            <DropShadowEffect BlurRadius="5"
                              Opacity=".5"
                              ShadowDepth="3" />
        </Border.Effect>
        <Border Name="ReceiverColor"
                BorderBrush="#FF96B2E4"
                BorderThickness="6"
                CornerRadius="15">
            <Grid>
                <Border Name="Mask"
                        Background="White"
                        BorderBrush="#FF3B5998"
                        BorderThickness=".5"
                        CornerRadius="13">
                </Border>
                <StackPanel>
                    <Image Name="Receiver"
                           Source="/Images/test.jpg" />
                    <StackPanel.OpacityMask>
                        <VisualBrush Visual="{Binding ElementName=Mask}" />
                    </StackPanel.OpacityMask>
                </StackPanel>
            </Grid>
        </Border>
    </Border>
</Grid>