WPF Border Object Border CornerRadius different from Border Background CornerRadius

Question

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.

Notice the grey protruding out from behind the blue at the corners.

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.

Did you try removing the Grid element enclosed within the first Border to see if that makes any difference? — Dean Kuga
Try using Peter Blois' snoop at snoopwpf.codeplex.com to check that each border has the same ActualWidth and ActualHeight, that there are no implicit margins or padding messing things up, etc. — Ed Bayiates

Navid Rahmani Navid Rahmani · Accepted Answer · 2011-08-10T21:07:42

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.

WPF Border Object Border CornerRadius different from Border Background CornerRadius

2 Answers