WPF Border Object Border CornerRadius different from Border Background CornerRadius

I have two Borders on top of each other. One with a BorderThickness but no background, the other one without a border thickness, but with a background. Both Borders have a CornerRadius of 3. The problem is that the corner of the Background of one of the Borders sticks out from behind the corner of the other Border.

Here is the XAML with the first border element having the background and the Border named FocusVisual having the BorderThickness.

<Grid x:Name="grid">
    <Border Background="{TemplateBinding Background}"  
            CornerRadius="3">
        <Grid>
            <Border x:Name="MouseOverVisual" 
                Opacity="0"
                Background="{StaticResource NuiFieldHoverBrush}"
                CornerRadius="3" />
            <Border>
                <Grid>
                    <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    <ContentPresenter x:Name="PART_WatermarkHost" 
                          Content="{TemplateBinding Watermark}"
                          ContentTemplate="{TemplateBinding WatermarkTemplate}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          IsHitTestVisible="False"
                          Margin="{TemplateBinding Padding}"
                          Visibility="Collapsed"/>
                </Grid>
            </Border>
        </Grid>
    </Border>
    <Border x:Name="FocusVisual" 
开发者_开发技巧            Opacity="0" 
            BorderThickness="{TemplateBinding BorderThickness}"
            BorderBrush="{StaticResource NuiFocusBrush}" 
            CornerRadius="3" />
</Grid>

CornerRadius having a different effect on the Background and Border of a Border object seems like a bug in WPF.

I could add a BorderThickness to the Border with the Background and set the BorderBrush to the Background color, but this causes the child elements of that border to be pushed in by the BorderThickness. I can probably get around this by rearranging elements, but it is kind of a pain so I thought I would see if anybody has a better workaround.

You should recalculate the CornerRadius of your inner border.
Assume a simpler example like this:

<Border x:Name="OuterBorder" Width="50" Height="25" Background="Gray" CornerRadius="5">
    <Border x:Name="InnerBorder" BorderBrush="red" BorderThickness="4" CornerRadius="5"/>
</Border>

The width and height of InnerBorder is less than OuterBorder by BorderThickness/2 from each side so you should calculate the corder radius in this way:

'CornerRadius of inner border' = 'CornerRadius of outer border' - 'BorderThickness of inner border'/2.

In this example CornerRadius of inner border should be 3.

Edit: I think this SO is better answer to you question.

Add a transparent border to the dark gray border and it will align with the blueish border. Make sure they have same border thickness.

<Grid Width="50" Height="40">
    <Border Background="Red" CornerRadius="3" BorderBrush="Transparent" BorderThickness="1">
        <TextBlock Text="Hello" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Border>
    <Border BorderBrush="Blue" CornerRadius="3" BorderThickness="1" Background="Transparent"/>       
</Grid>