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

Border styling

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 examples use side-only borders to create compact accents without enclosing the entire surface. Use Border.WithColor with a CssColor value when the border should use a custom CSS color instead of a contextual theme color.

Default border on all sides
Rounded
Borders with primary color
Borders with subtle color
Start border only
Rounded pill
Bottom border accent
Start border with a custom RGBA color 
<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>

<Div Border="@Border.WithColor( CssColor.Rgba( 124, 58, 237, 0.65 ) ).OnStart" Padding="Padding.Is3">
    Start border with a custom RGBA color
</Div>
On this page