Border

Quick start

Use Border when you need one child framed by background, border thickness, padding, or rounded corners. It is the standard building block for cards, control templates, status pills, and framed content areas.

<Border Background="#182636"
                BorderBrush="#4FC7C1"
                BorderThickness="1"
                CornerRadius="10"
                Padding="12">
    <TextBlock Text="Connection established." />
</Border>

Minimal frame

<Border BorderBrush="#55738F"
                BorderThickness="1" />

Clipped overflow probe

<Border Width="220"
                Height="120"
                Background="#223245"
                BorderBrush="#8CB7E6"
                BorderThickness="2"
                CornerRadius="16"
                ClipToBounds="True">
    <Grid>
        <TextBlock Text="Session summary" />
        <Border HorizontalAlignment="Right"
                        VerticalAlignment="Top"
                        Background="#EB8E35"
                        BorderBrush="#FFD685"
                        BorderThickness="1"
                        CornerRadius="16"
                        Padding="12,7">
            <Border.RenderTransform>
                <TranslateTransform X="54" Y="-12" />
            </Border.RenderTransform>
            <TextBlock Text="Overflow badge" />
        </Border>
    </Grid>
</Border>

Content model and layout

Border hosts exactly one child through the inherited Decorator.Child slot. During layout it reserves space for both BorderThickness and Padding, then measures and arranges the child inside the remaining inner rectangle.

• Desired width = child width + left border + right border + left padding + right padding.
• Desired height = child height + top border + bottom border + top padding + bottom padding.
• If there is no child, desired size is just the combined chrome thickness.
• Border never creates extra layout structure beyond its single hosted child.

<Border BorderBrush="#35516B"
                BorderThickness="2"
                Padding="12,8">
    <Border.Child>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Text="Account" Margin="0,0,0,6" />
            <TextBlock Grid.Row="1" Text="Signed in as admin@example.com" />
        </Grid>
    </Border.Child>
</Border>

Brushes, corners, and clipping

The Border render path is intentionally explicit. Background fills first, border chrome renders on top, and rounded corners are tessellated from the configured radii. Clipping is off by default and becomes active only when ClipToBounds is set to True.

<Border Background="#101822"
                BorderBrush="#8CB7E6"
                BorderThickness="2"
                CornerRadius="18"
                ClipToBounds="True">
    <Grid>
        <Border HorizontalAlignment="Right"
                        VerticalAlignment="Top"
                        Background="#EB8E35"
                        CornerRadius="16"
                        Padding="12,7">
            <Border.RenderTransform>
                <TranslateTransform X="54" Y="-12" />
            </Border.RenderTransform>
            <TextBlock Text="Overflow badge" />
        </Border>
    </Grid>
</Border>

CornerRadius object-element form

<Border BorderBrush="#223344"
                BorderThickness="2">
    <Border.CornerRadius>
        <CornerRadius TopLeft="12" TopRight="8" BottomRight="4" BottomLeft="12" />
    </Border.CornerRadius>
    <TextBlock Text="Asymmetric corners" />
</Border>

Property reference

Use literal colors, brush resources, brush object elements, or bindings that resolve to brush values. The Border surface follows the same brush-oriented contract you would expect from WPF.

Patterns and examples

Rounded content card

<Border Background="#172331"
                BorderBrush="#28445F"
                BorderThickness="1"
                CornerRadius="12"
                Padding="14">
    <StackPanel>
        <TextBlock Text="Recent sessions" Margin="0,0,0,10" />
        <TextBlock Text="12 sessions loaded" />
    </StackPanel>
</Border>

Section rail

<Border Background="#203040"
                BorderBrush="#4A6C89"
                BorderThickness="0,0,0,1"
                Padding="0,0,0,8">
    <TextBlock Text="Diagnostics" />
</Border>

Framed input surface

<Border Background="#111922"
                BorderBrush="#35516B"
                BorderThickness="1"
                CornerRadius="8"
                Padding="10">
    <TextBox Text="{Binding SearchText}" Width="220" />
</Border>

Template chrome

<Style x:Key="PanelButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#223245" />
    <Setter Property="BorderBrush" Value="#4FC7C1" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Padding" Value="14,8" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="8"
                                Padding="{TemplateBinding Padding}">
                    <ContentPresenter HorizontalAlignment="Center"
                                                        VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Notes and pitfalls