Rounded Corners in UserControl showing inner square border - wpf

Question

I have a WPF app.
It has a grid that fills the whole page and there are 3 rows.
In the middle row I display a usercontrol depending on what menu button the User has chosen.
I want to create a rounded border around each Usercontrol and after Googling I found an example and implemented it.
It works but I get and inner rectangular border as well as the rounded outer border.
This is the markup inside my UserControl:
<Border BorderThickness="3" BorderBrush="White" CornerRadius="10" Padding="2"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Grid Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
<Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
<Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
<TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
<TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
<Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" />
</Grid>
</Grid>
</Border>
and it gives me this appearance:

Answer 1

The inner rectangular border is not a border at all. You have the border (white) and the grid (white as well) inside it. The grid fits your border, but area between them doesn't have any color, so it is transparent, thus you see it blue. If you want the whole area white, set the border's background white. Also, in your code one of the nested grids looks redundant.
Edit: Looks like after setting the border's background you still have two border's lines. Just remove BorderThickness and BorderBrush (It's the same as set them default) and increase padding a little. Also, you don't need to set the background of the grid separately, it's already white from the border.
This is how I imagine it:
<Border CornerRadius="10" Padding="5" Background="White"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
<Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
<Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
<TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
<TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
<Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" />
</Grid>
</Border>

Answer 2

I have changed the Border placement, and set its margin to -3.
Setting the Border background to White will still keep 4 corners of the Grid remaining Visible.
See if this works for you.
<Grid Canvas.Left="40" Canvas.Top="103">
<Grid Background="White">
<Grid Margin="5">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Content="Search for Customer" />
<Label Grid.Row="1" Grid.Column="1" Content="Enter Customer First Name"/>
<Label Grid.Row="3" Grid.Column="1" Content="Enter Customer Last Name" />
<TextBox Name="txtForeName" Grid.Column="1" Grid.Row="2" />
<TextBox Name="txtSurname" Grid.Column="1" Grid.Row="4" />
<Button Name="btnCustomerSearch" Grid.Column="1" Grid.Row="5" Content="Press" />
</Grid>
</Grid>
</Grid>
<Border BorderThickness="3" BorderBrush="White" CornerRadius="10" Padding="2" Margin="-3"/>
</Grid>