In this article I will explain how to create an ASP.Net AJAX Control Toolkit ModalPopupExtender Modal Popup with Rounded Corners using CSS3
Note: Rounded Corners will be visible only in browsers that support CSS 3. For example browsers such as Internet Explorer version 8 or earlier will not display rounded corners
 
 
HTML Markup
First we need to register the AJAX Control Toolkit on the page
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
Below is the ASP.Net AJAX ModalPopupExtender Modal Popup
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
<cc1:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="btnShow"
    OkControlID="btnYes" CancelControlID="btnNo" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
    <div class="header">
        Confirmation
    </div>
    <div class="body">
        Do you want to delete this record?
    </div>
    <div class="footer" align="right">
        <asp:Button ID="btnYes" runat="server" Text="Yes" CssClass="yes" />
        <asp:Button ID="btnNo" runat="server" Text="No" CssClass="no" />
    </div>
</asp:Panel>
 
Note: For more details on using the ASP.Net AJAX ModalPopupExtender please refer my article Building Modal Popup using ASP.Net AJAX ModalPopupExtender Control
 
 
CSS Classes for Rounded Corners Modal Popup
Below are the CSS Classes for styling the ASP.Net AJAX Modal Popup and also for rounding its corners using the border-radius CSS3 property.
<style type="text/css">
    .modalBackground
    {
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
    }
    .modalPopup
    {
        background-color: #FFFFFF;
        width: 300px;
        border: 3px solid #0DA9D0;
        border-radius: 12px;
        padding:0
      
    }
    .modalPopup .header
    {
        background-color: #2FBDF1;
        height: 30px;
        color: White;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    .modalPopup .body
    {
        min-height: 50px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
    }
    .modalPopup .footer
    {
        padding: 6px;
    }
    .modalPopup .yes, .modalPopup .no
    {
        height: 23px;
        color: White;
        line-height: 23px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
    }
    .modalPopup .yes
    {
        background-color: #2FBDF1;
        border: 1px solid #0DA9D0;
    }
    .modalPopup .no
    {
        background-color: #9F9F9F;
        border: 1px solid #5C5C5C;
    }
</style>
 
ASP.Net AJAX Modal Popup with Rounded Corners using CSS3
 
 
Demo
View Demo
 
Downloads