Border overlapping problem

Question

I have this grid with a border around it:

<Border Padding="0" BorderBrush="Orange" BorderThickness="2" CornerRadius="5">
    <Grid >                       
        <Label Grid.Row="0" Grid.Column="0" BorderBrush="Black"/>
        <Label Grid.Row="1" Grid.Column="0" BorderBrush="Black"/>
        <Label Grid.Row="0" Grid.Column="1" BorderBrush="Black"/>
        <Label Grid.Row="1" Grid.Column="1" BorderBrush="Black"/>
    </Grid>
</Border>

And the problem is, that the label borders overlap the orange border in the grid corners. It's probably because of the z-index. How to solve this problem?

Answer 1

See the following question: How to make the contents of a round-cornered border be also round-cornered?

It'll give you a result similar to this

Use it like

<local:ClippingBorder Padding="0" BorderBrush="Orange" BorderThickness="2" CornerRadius="5">
    <Grid >
        <!--...-->
    </Grid>
</local:ClippingBorder>

Answer 2

You could set the labels not to have a border on every side, like so

<Label Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Label Grid.Row="1" Grid.Column="0" BorderBrush="Black" BorderThickness="0,1,1,0"/>
<Label Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="1,0,0,1"/>
<Label Grid.Row="1" Grid.Column="1" BorderBrush="Black" BorderThickness="1,1,0,0"/>