Blazorise Border Utilities

Style borders, sides, colors, and radius with a fluent builder that stays in sync with your theme.

Border utilities help you highlight surfaces, separate content, and indicate state without writing custom CSS. Because they use the same tokens as your chosen provider, borders stay consistent across the UI.

How it works

Use the Border parameter and chain sizes (Is1 to Is5), sides (OnTop, OnEnd, OnBottom, OnStart), colors (Primary, Success, Danger), and radius helpers (Rounded, RoundedPill). This keeps border styling consistent and works well with other utilities like Background and Padding.

Examples

Borders, colors, and radius

These examples show how to add subtle separation, highlight status, and round corners without custom CSS, keeping component styling consistent across the app. They also demonstrate side-only borders and pill-style rounding for chips or tags.

The last example uses a bottom-only border to create a compact accent without enclosing the entire surface.

Default border on all sides
Rounded
Borders with primary color
Borders with subtle color
Start border only
Rounded pill
Bottom border accent 
<Div Border="Border.Is1" Padding="Padding.Is3" Margin="Margin.Is2.FromBottom">
    Default border on all sides
</Div>

<Div Border="Border.Is1.Rounded" Padding="Padding.Is3" Margin="Margin.Is2.FromBottom">
    Rounded
</Div>

<Div Border="Border.Primary" Padding="Padding.Is3" Margin="Margin.Is2.FromBottom">
    Borders with primary color
</Div>

<Div Border="Border.Is3.Success.Subtle" Padding="Padding.Is3" Margin="Margin.Is2.FromBottom">
    Borders with subtle color
</Div>

<Div Border="Border.Is2.OnStart" Padding="Padding.Is3" Margin="Margin.Is2.FromBottom">
    Start border only
</Div>

<Div Border="Border.Is1.RoundedPill" Padding="Padding.Is3" Margin="Margin.Is2.FromBottom">
    Rounded pill
</Div>

<Div Border="Border.Is2.Danger.OnBottom" Padding="Padding.Is3" Margin="Margin.Is2.FromBottom">
    Bottom border accent
</Div>
On this page