Border

Quick start

Use Border when you need simple container chrome around exactly one child element. It is a common building block for cards, section headers, framed content, and control templates.

Minimal border

<Border Background="#223245"
        BorderBrush="#4FC7C1"
        BorderThickness="1" />

Bordered card with content

<Border Background="#182636"
        BorderBrush="#28445F"
        BorderThickness="1"
        Padding="12">
  <TextBlock Text="Connection established." />
</Border>

Asymmetric chrome for layout framing

<Border Background="#101822"
        BorderBrush="#3E5670"
        BorderThickness="1,1,1,3"
        Padding="16,10,16,14">
  <StackPanel>
    <TextBlock Text="Build summary" Margin="0,0,0,6" />
    <TextBlock Text="3 warnings, 0 errors" />
  </StackPanel>
</Border>

How Border lays out its child

Border adds chrome thickness around its child during both measure and arrange. The total chrome is the sum of BorderThickness and Padding for each side.

• Desired width = child desired width + left/right border thickness + left/right padding.
• Desired height = child desired height + top/bottom border thickness + top/bottom padding.
• If no child is present, desired size is just the combined border and padding thickness.
• If the final slot is too small, the child is arranged in the remaining non-negative inner rectangle.

<Border BorderBrush="#55738F"
        BorderThickness="2"
        Padding="12,8">
  <TextBlock Text="Measured content" />
</Border>

In that example, the child gets the available size reduced by 2 + 12 on the left, 2 + 8 on the top, and the corresponding values on the other sides.

Rendering behavior

The render path is intentionally simple and predictable. Border does not draw rounded geometry or perform clipping. It paints axis-aligned rectangles.

• Left, right, top, and bottom borders are rendered independently.
• A side is skipped when its thickness is less than or equal to zero.
• Border edges remain rectangular even if CornerRadius is set.

<Border Background="#20405C"
        BorderBrush="#9AD1FF"
        BorderThickness="4,1,1,1"
        Opacity="0.85">
  <TextBlock Text="Accent rail on the left" Margin="8" />
</Border>

Single-child content model

Border hosts exactly one child element. The XAML loader has explicit support for this and throws if you place multiple direct children inside the same border.

Single child with nested layout

<Border Background="#16212D"
        BorderBrush="#34506C"
        BorderThickness="1"
        Padding="12">
  <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>

Explicit property-element form

<Border BorderBrush="#28445F" BorderThickness="1">
  <Border.Child>
    <TextBlock Text="Hosted through Border.Child" />
  </Border.Child>
</Border>

Property reference

Use color literals such as #223245, named colors when supported by the loader, or bound values that resolve to Color. Do not document or expect WPF-style brush objects for Background or BorderBrush on this control.

Patterns and examples

Card or panel container

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

Section header

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

Status badge or chip

<Border Background="#1D3A2A"
        BorderBrush="#4BA36E"
        BorderThickness="1"
        Padding="8,4">
  <TextBlock Text="ONLINE" />
</Border>

Input or content frame

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

Nested borders for layered chrome

<Border Background="#0E141C"
        BorderBrush="#2C4259"
        BorderThickness="1"
        Padding="6">
  <Border Background="#172331"
          BorderBrush="#4F6E8C"
          BorderThickness="1"
          Padding="12">
    <TextBlock Text="Two-stage framing" />
  </Border>
</Border>

Border inside a ControlTemplate

<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}"
                Padding="{TemplateBinding Padding}">
          <ContentPresenter HorizontalAlignment="Center"
                            VerticalAlignment="Center" />
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Notes and pitfalls