Search results

Create Dropdown Menu with rounded corner in Blazor Dropdown Menu component

Dropdown Menu with rounded corner can be achieved by adding 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">
    <DropDownButtonItems>
        <DropDownButtonItem Text="Edit"></DropDownButtonItem>
        <DropDownButtonItem Text="Copy"></DropDownButtonItem>
        <DropDownButtonItem Text="Paste"></DropDownButtonItem>
    </DropDownButtonItems>
</SfDropDownButton>

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

Output be like

Button Sample