WPF CornerRadius

In WPF there is the Border type which simply puts a border around any UIElement. I find myself using this alot to create cool rounded corners. The blue rounded rectangle to the right is what we'd like to see...

Well it doesn't work so well if the thing inside your Border element doesn't have rounded corners, it's edges simply bleed over the rounded corner.

And this is what you get (I lowered the opacity so you could see how it bleeds over):


<Border CornerRadius="15" Height="50" Width="50" BorderThickness="1"
BorderBrush="Black">
<Rectangle Fill="Blue" Height="50" Width="50"/>
</Border>

Okay you've seen the "ClipToBounds" property which MSDN says: "Gets or sets a value indicating whether to clip the content of this element (or content coming from the child elements of this element) to fit into the size of the containing element."

Sounds like that will work great!

<Border CornerRadius="15" Height="50" Width="50" BorderThickness="1"
BorderBrush="Black">
<Rectangle Fill="Blue" Height="50" Width="50" ClipToBounds="True"/>
</Border>


Unfortunately it does nothing :) I am not sure why ClipToBounds even exists because if I restrict the Border element to 25,25 the rectangle cannot be larger than 25,25...at least from what xaml I've been able to crank out.

So the trick to get this to work is not to use an element inside rather a brush on the background, if you have a visual you could create a VisualBrush. Pretty simple:

<Border CornerRadius="15" Height="50" Width="50" BorderThickness="1"
BorderBrush="Black" Background="Blue" >
</Border>


The other solution isn't as nice but setting the clip property on the containing element works as well.