How to style a control inside a border with a corner radius

Question

I have a simple window containing an outer border with a corner radius, and an inner border with a background. The border is basically just a placeholder for any type of content I would like to place inside the rounded corner outer border.

<Window x:Class="TestRunner.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" 
        WindowStyle="None" Background="{x:Null}" >
    <Border BorderThickness="2" BorderBrush="Black" CornerRadius="8"  >     
           <Border Background="White">

           </Border>
    </Border>
</Window>

The problem is that the inner control does not inherit the rounded corner so it draws on top of the rounded corner, like this:

How do I adjust my outer control, so inner controls do not attempt to draw on top of the rounded corner.

Setting rounded corner on the inner control is not a viable option as it will lead to horrible duplication of corner radius.

Answer 1

I'm assuming that you have a Border within a Border just to illustrate the problem. If possible, just avoid the issue altogether by not including any control within the outer Border that renders anything in the corners.

If you must include a control that renders something in the corners, you could use a Clip:

<Border x:Name="border" CornerRadius="10">
    <Border.Clip>
        <RectangleGeometry Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}" RadiusX="10" RadiusY="10"/>
    </Border.Clip>

    <Border Background="White"/>
</Border>

Another option (depending on your exact scenario) might be to place the outer Border "above" the other content. As long as it has a transparent Fill and IsHitTestVisible set to false, it may be sufficient:

<Grid>
    <Border Background="White"/>
    <Border CornerRadius="10" BorderBrush="Black" BorderThickness="3" Fill="Transparent" IsHitTestVisible="false"/>
</Grid>