Dialog Header border color

[David Adler]

How to I set the border color of the dialog header? I am able to set the background-color but there is a white border. It may be the order of the actual dialog I am seeing. I have attached a screenshot of the dialog.

Here is my CSS

.e-dialog .e-dlg-header {

    color: white;

    font-size: 20px;

    font-weight: bold;

}

.e-dialog .e-dlg-header-content {

    background-color: #08c;

}

Here is my markup from my .razor file

<SfDialog @bind-Visible="@(ShowCancelConfirmation)" Width="350px" IsModal="true">

    <DialogTemplates>

        <Header>

            <div class="e-dlg-header">Confirm Cancel</div>

        </Header>

        <Content>

            <div>

                <p>Are you sure you want to cancel?</p>

            </div>

        </Content>

        <FooterTemplate>

            <div class="text-center">

                <button class="btn btn-outline-secondary mr-2 btn-sm cd-yes-no-btn " type="button" @onclick="HideCancelConfirmationDialog">No</button>

                <button class="btn btn-outline-primary btn-sm cd-yes-no-btn" type="button" @onclick="HandleExistingProductCancel">Yes</button>

            </div>

        </FooterTemplate>

    </DialogTemplates>

</SfDialog>

Attachment: Screenshots_Dialog_5ac2246c.zip

[Indrajith Srinivasan]

Hi David,

Greetings from Syncfusion support,

We have validated your shared screenshot. The mentioned borders are default dialog borders. You can set the dialog header border using this class .e-dialog .e-dlg-header-content with the border CSS. if you don’t want the default dialog border also you can remove it. We have prepared a sample based on your requirements.

Sample: https://www.syncfusion.com/downloads/support/forum/153227/ze/Dialog_header1929550747

Output screenshot: 

 

 

Please let us know if the solution helps.

Regards, 

Indrajith