Search code examples
wpfrounded-corners

WPF rectangle - round just top corners

How can I have just the top corners rounded for a WPF rectangle?

I created a border and set the CornerRadius property and inside the border I've added my rectangle, but it doesn't work, the rectangle is not rounded.

<Border BorderThickness="1" CornerRadius="50,50,0,0" BorderBrush="Black">
    <Rectangle Fill="#FF5A9AE0" Stretch="UniformToFill" ClipToBounds="True"/>
</Border>
Solution

  • The problem you've got is that the rectangle is "overflowing" the rounded corners of your border.

    A rectangle can't have individually rounded corners, so if you just put the background colour on the border and remove the rectangle:

    <Border BorderThickness="1" Grid.Row="0" Grid.ColumnSpan="2"
        CornerRadius="50,50,0,0" BorderBrush="Black" Background="#FF5A9AE0">
</Border>

    You'll get your desired effect.