Border Corner Radius Fill Atrocity

Question

I have a border defined like so:

<Border x:Name="BaseBar" BorderThickness="1,1,1,2" Height="29" CornerRadius="0,0,16,16" Grid.Row="2">
<Border.BorderBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF6E6E6E" Offset="0.004"/>
        <GradientStop Color="#FF1A1A1A" Offset="0.043"/>
    </LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF313131" Offset="0"/>
        <GradientStop Color="#FF232323" Offset="1"/>
    </LinearGradientBrush>
</Border.Background>

It doesn't fill correctly when the corners have a radius, though. Here is an image of the bottom left corner:

You can clearly see the brighter background shining through the darker foreground. Is there a way to alleviate this?

EDIT: Additional picture, showing that it is the background shining through:

In this case, only the white half of the background is seen, whereas the black half (while also getting through) is not really detectable.

Answer 1

In this case, I usually nest two Borders inside each other. This only works if the inner fill color will be opaque, but yours already is so this should be fine.

So instead of, for example (using solid colors instead of gradients to make the example easier to follow):

<Border BorderThickness="1,1,1,2" CornerRadius="0,0,16,16"
        BorderBrush="Blue" Background="Gray">
  ...
</Border>

you could instead use:

<Border CornerRadius="0,0,16,16" Background="Blue">
  <Border CornerRadius="0,0,15,15" Background="Gray" Margin="1,1,1,2">
    ...
  </Border>
</Border>

So the outer Border uses the "border" color as its Background, and then the inner Border sets its Margin to the "border width" and then uses the real "background" color for its Background. The effect is the same, but the semi-transparent seam is gone.

To make it look right, you need to tweak the inner border's CornerRadius -- it's inside the border, so it's a slightly smaller radius than the outside corner. If the border was 1 pixel wide, then you'd want your CornerRadius to be 1 pixel smaller; but since you've got an uneven border, you'll probably just want to eyeball it to see what looks right.