Create Blazor Dropdown Menu with Rounded Corner

16 Mar 20221 minute to read

Dropdown Menu with rounded corner can be achieved by adding the border-radius CSS property to button element.

In the following example, e-round-corner class is defined with 5px border-radius property and added that class to button element using CssClass property.

@using Syncfusion.Blazor.SplitButtons

<SfDropDownButton CssClass="e-round-corner" Content="Clipboard">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Edit"></DropDownMenuItem>
        <DropDownMenuItem Text="Copy"></DropDownMenuItem>
        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
    </DropDownMenuItems>
</SfDropDownButton>

<style>
    .e-round-corner {
        border-radius: 5px;
    }
</style>