RoundedCornersExtender¶

The RoundedCornersExtender applies rounded corners to an element using CSS border-radius. It supports selecting which corners to round and optionally sets a background color for the rounded area, giving elements a modern, polished appearance.

Original Ajax Control Toolkit documentation: https://www.asp.net/ajax/ajaxcontroltoolkit/RoundedCornersExtender

Features Supported in Blazor¶

TargetControlID — ID of the element to apply rounded corners to
Radius — Corner radius in pixels
Corners — Which corners to round (All, Top, Bottom, Left, Right, TopLeft, TopRight, BottomLeft, BottomRight, None)
Color — Background color for the rounded area
Enabled — Enable or disable the extender behavior
BehaviorID — Optional identifier for JavaScript behavior lookup

BoxCorners Enum¶

Specifies which corners to round (can be combined):

[Flags]
enum BoxCorners
{
    None = 0,
    TopLeft = 1,
    TopRight = 2,
    BottomLeft = 4,
    BottomRight = 8,
    Top = TopLeft | TopRight,      // Both top corners
    Bottom = BottomLeft | BottomRight,  // Both bottom corners
    Left = TopLeft | BottomLeft,   // Both left corners
    Right = TopRight | BottomRight, // Both right corners
    All = TopLeft | TopRight | BottomLeft | BottomRight  // All corners
}

Web Forms Syntax¶

<asp:Panel ID="pnlBox" runat="server" style="width: 300px; padding: 20px; background-color: white; border: 1px solid #ccc;">
    <p>This panel has rounded corners.</p>
</asp:Panel>

<ajaxToolkit:RoundedCornersExtender
    ID="rounded1"
    runat="server"
    TargetControlID="pnlBox"
    Radius="10"
    Corners="All"
    Color="#FFFFFF" />

Blazor Migration¶

<Panel ID="pnlBox" style="width: 300px; padding: 20px; background-color: white; border: 1px solid #ccc;">
    <p>This panel has rounded corners.</p>
</Panel>

<RoundedCornersExtender
    TargetControlID="pnlBox"
    Radius="10"
    Corners="BoxCorners.All"
    Color="#FFFFFF" />

Migration is simple: Remove the ajaxToolkit: prefix and runat="server". Use enum type names for corners!

Properties Reference¶

Property	Type	Default	Description
`TargetControlID`	`string`	(required)	ID of the element to apply rounded corners to
`Radius`	`int`	`5`	Corner radius in pixels
`Corners`	`BoxCorners`	`All`	Specifies which corners to round
`Color`	`string`	`""`	Background color for the rounded area (e.g., "#FFFFFF"); if empty, preserves element's background
`BehaviorID`	`string`	TargetControlID	Optional identifier for JavaScript behavior lookup
`Enabled`	`bool`	`true`	Whether the extender is active

Usage Examples¶

All Corners Rounded¶

@rendermode InteractiveServer

<Panel ID="pnlCard" style="width: 300px; padding: 20px; background-color: white; border: 1px solid #ddd;">
    <h3>Card Title</h3>
    <p>This panel has all corners rounded.</p>
</Panel>

<RoundedCornersExtender
    TargetControlID="pnlCard"
    Radius="10"
    Corners="BoxCorners.All" />

Top Corners Only¶

@rendermode InteractiveServer

<Panel ID="pnlHeader" style="width: 100%; padding: 15px; background: linear-gradient(to right, #2196F3, #1976D2); color: white;">
    <h2>Section Header</h2>
</Panel>

<RoundedCornersExtender
    TargetControlID="pnlHeader"
    Radius="8"
    Corners="BoxCorners.Top" />

Bottom Corners with Color¶

@rendermode InteractiveServer

<Panel ID="pnlFooter" style="width: 100%; padding: 15px; background-color: #f5f5f5; border-top: 1px solid #ccc;">
    <p>&copy; 2024 My Company. All rights reserved.</p>
</Panel>

<RoundedCornersExtender
    TargetControlID="pnlFooter"
    Radius="10"
    Corners="BoxCorners.Bottom"
    Color="#f5f5f5" />

Individual Corners¶

@rendermode InteractiveServer

<Panel ID="pnlCustom" style="width: 250px; padding: 20px; background-color: white; border: 2px solid #FF9800;">
    <p>Only bottom-right corner is rounded.</p>
</Panel>

<RoundedCornersExtender
    TargetControlID="pnlCustom"
    Radius="15"
    Corners="BoxCorners.BottomRight" />

Large Radius for Button-Like Appearance¶

@rendermode InteractiveServer

<Panel ID="pnlButton" style="width: 200px; padding: 15px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; cursor: pointer;">
    <strong>Click Me!</strong>
</Panel>

<RoundedCornersExtender
    TargetControlID="pnlButton"
    Radius="25"
    Corners="BoxCorners.All" />

HTML Output¶

The RoundedCornersExtender produces no HTML itself — it applies CSS border-radius styling to the target element.

JavaScript Interop¶

The RoundedCornersExtender loads rounded-corners-extender.js as an ES module. JavaScript handles:

Applying CSS border-radius based on specified corners
Setting background color if provided
Handling older browsers that don't support border-radius
Calculating corner values based on the BoxCorners flags

Render Mode Requirements¶

The RoundedCornersExtender requires InteractiveServer render mode:

@rendermode InteractiveServer

Graceful Degradation¶

SSR/Static mode: The extender silently skips initialization. Use CSS border-radius as fallback.
JavaScript disabled: Same as SSR — Corners appear square unless CSS border-radius is present.

Modern Alternative (CSS-Only)¶

For most use cases, you can apply rounded corners directly with CSS without needing this extender:

<!-- Modern approach: Use CSS border-radius directly -->
<Panel ID="pnlBox" style="width: 300px; padding: 20px; background-color: white; border: 1px solid #ccc; border-radius: 10px;">
    <p>Rounded corners via CSS.</p>
</Panel>

Use the RoundedCornersExtender primarily for dynamic scenarios or legacy component compatibility.

Migration Notes¶

From Web Forms Ajax Toolkit¶

Remove ajaxToolkit: prefix

- <ajaxToolkit:RoundedCornersExtender
+ <RoundedCornersExtender

Remove runat="server" and ID attributes

Use enum types for corners

- Corners="All"
+ Corners="BoxCorners.All"

Before (Web Forms)¶

<asp:Panel ID="pnlBox" runat="server" style="width: 300px; padding: 20px; background: white;">
    <p>Content</p>
</asp:Panel>

<ajaxToolkit:RoundedCornersExtender
    ID="rounded1"
    TargetControlID="pnlBox"
    Radius="10"
    Corners="All"
    runat="server" />

After (Blazor)¶

<Panel ID="pnlBox" style="width: 300px; padding: 20px; background: white;">
    <p>Content</p>
</Panel>

<RoundedCornersExtender
    TargetControlID="pnlBox"
    Radius="10"
    Corners="BoxCorners.All" />

Best Practices¶

Use CSS border-radius for modern browsers — The native CSS approach is simpler and more performant
Choose appropriate radius — 5-10px for subtle, 15-25px for more prominent rounding
Match corner selection to design — Use Top for headers, Bottom for footers, All for cards
Test across browsers — Most modern browsers support border-radius natively
Combine with other effects — Rounded corners pair well with shadows and borders

Troubleshooting¶

Issue	Solution
Corners not rounding	Verify `TargetControlID` matches the element's ID. Ensure `@rendermode InteractiveServer` is set.
Color shows gaps	The `Color` property is optional; ensure it matches or complements the element's background.
Performance issues	This extender is rarely needed. Use CSS `border-radius` instead for better performance.
Old browser support	Modern browsers support `border-radius` natively. This extender adds no value for modern web apps.