How to fix empty space between a border and a background in button with rounded corners?

Question

I have created a simple button template for my WPF application:

<Style x:Key="DialogButton" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="buttonBorder" CornerRadius="8" BorderThickness="2" BorderBrush="{TemplateBinding Background}" Background="{TemplateBinding Background}" MaxHeight="30" MinWidth="70" Margin="0,8,8,8">
                    <Grid>
                        <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="buttonBorder" Property="BorderBrush" Value="{DynamicResource WindowBackColor}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

But as you can see in the screenshot below, buttons have a small empty space in the corners:

Here is a zoomed in part of the button:

How can I fix this?

Thanks!

Answer 1

WPF renders the elements with anti-aliasing by default and this can result in small gaps between shapes.

Set the EdgeMode to Aliased on your Border this should get rid of the small gap

RenderOptions.EdgeMode="Aliased"

Example:

    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border RenderOptions.EdgeMode="Aliased" Name="buttonBorder" CornerRadius="8" BorderThickness="2" BorderBrush="{TemplateBinding Background}" Background="{TemplateBinding Background}" MaxHeight="30" MinWidth="70" Margin="0,8,8,8">
                        <Grid>
                            <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="buttonBorder" Property="BorderBrush" Value="{DynamicResource WindowBackColor}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Result:

Before(anti-aliasing): After(aliased):

---

Option 2:

Another simple option is to change the Grid in the Style to a Border and set the Background and CornerRadius the same but set the Margin to -1, this will result in a smoother apperence than using Aliased and remove the small gap

Example:

<Border Name="buttonBorder" CornerRadius="8" BorderThickness="2" BorderBrush="{TemplateBinding Background}" MaxHeight="30" MinWidth="70" Margin="0,8,8,8">
    <Border CornerRadius="8" Margin="-1" Background="{TemplateBinding Background}" >
        <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Border>
</Border>

Answer 2

Adding another border for hover on top of the existing finally does the trick with desired effects:

<Style x:Key="DialogButton" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Border Name="buttonBorder" CornerRadius="8" Background="{TemplateBinding Background}" MaxHeight="30" MinWidth="70" Margin="0,8,8,8">
                        <Grid>
                            <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Grid>
                    </Border>
                    <Border Name="buttonHoverBorder" CornerRadius="8" BorderThickness="2" BorderBrush="{DynamicResource WindowBackColor}" Visibility="Hidden" Background="Transparent" MaxHeight="30" MinWidth="70" Margin="0,8,8,8" 
                        Width="{Binding ElementName=buttonBorder, Path=Width}" Height="{Binding ElementName=buttonBorder, Path=Height}"> 
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="buttonHoverBorder" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 3

Try setting the BorderThickness property of your buttonBorder Border to either "0" or a larger number. Having said that, I've never seen this before on any of my Border elements... are you really sure that isn't just some distortion on the image of the button?