removing border from a toolbar

[mark wheeler]

How do I remove the border from a toolbar ?

Ive tried this on my page

<style>

      .e-toolbar {

        border: none;

    }

</style>and then this

 <SfToolbar CssClass="e-toolbar">

but it makes no difference, the toolbar always has a border

[Swathi Ravi]

Hi Mark,

Based on your query, we understand that you want to remove the border of the Toolbar, as shown in the image below.

If this is your requirement, you can achieve it by overriding the default CSS styles with the snippet shared below.

[index.razor]

@using Syncfusion.Blazor.Navigations

<div class="component-container">

    <SfToolbar CssClass="customize-toolbar">

        <ToolbarItems>

            <ToolbarItem Text="Cut"></ToolbarItem>

            <ToolbarItem Text="Copy"></ToolbarItem>

            <ToolbarItem Text="Paste"></ToolbarItem>

        </ToolbarItems>

    </SfToolbar>

</div>

<style>

    .customize-toolbar.e-toolbar {

        background: white;

        box-shadow: none;

    }

    .customize-toolbar.e-toolbar .e-toolbar-items {

        background: white;

    }

</style>

Sample: https://blazorplayground.syncfusion.com/VthTjcBoKzfsKeYm

Output:

If this does not meet your requirement, please provide a sample that replicates the issue or modify the shared sample to replicate the issue. Also, indicate which theme you are using in your project.

Regards,

Swathi Ravi