Question

Hope that my question is easy enough 🙂 I have BORDER as main container with some corner radius. There is a GRID inside of it and if I’d like to set some background color to grid – there is an ugly fill parts outside of corners become…

So, how can I set my BORDER like a global container and everything inside stays inside?

Thank you!

Answer 1

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

ClippingBorder from the answer does a very good job at this. Here is a comparison between the regular Border and ClippingBorder.

<StackPanel Orientation="Horizontal">
    <Border CornerRadius="20,20,20,20"
            BorderThickness="4"
            BorderBrush="Black"
            Width="50"
            Height="50">
        <Grid Background="Red"/>
    </Border>
    <controls:ClippingBorder CornerRadius="20,20,20,20"
                             BorderThickness="4"
                             BorderBrush="Black"
                             Width="50"
                             Height="50"
                             Margin="20,0,0,0">
        <Grid Background="Red"/>
    </controls:ClippingBorder>
</StackPanel>