We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Remove the inner border on both buttons

Hi, Im trying to remove the inner border on both buttons after been selected w/o luck



<SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">

        <ButtonGroupButton @bind-Selected="isPorcentageDiscount" CssClass="btn-discount">%</ButtonGroupButton>

        <ButtonGroupButton CssClass="btn-amount">$</ButtonGroupButton>



    .e-btn-group .e-btn.btn-discount {


        border-color: #605e5c !important;


    .e-btn-group .e-btn.btn-amount {

        border-color: #605e5c !important;


    .e-btn-group > input:focus {

            border:none !important;

            outline:none !important;

            border-inline:none !important;



1 Reply 1 reply marked as answer

YA YuvanShankar Arunagiri Syncfusion Team October 6, 2022 02:44 AM

Hi Lius,

We have checked your reported query and please use the below CSS code to achieve your requirement.

@using Syncfusion.Blazor.SplitButtons


<SfButtonGroup CssClass="e-remove-border" Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">

    <ButtonGroupButton @bind-Selected="isPercentageDiscount">%</ButtonGroupButton>





    private bool isPercentageDiscount = true;




    .e-btn-group.e-remove-border input:focus + label.e-btn {

        outline: none !important;



Please get back to us if you need further assistance on this.


Yuvan Shankar A

Marked as answer
Live Chat Icon For mobile
Up arrow icon