How to create rounded corners on DIV's with CSS and ASP.NET MVC 3_问答_开发者

How to create rounded corners on DIV's with CSS and ASP.NET MVC 3

开发者 https://www.devze.com 2023-03-17 10:18 出处：网络

I am trying to create rounded corners on my divs. I am using the standard template in an ASP.NET MVC 3 application.

I have followed this guide:

http://viralpatel.net/blogs/2009/08/rounded-corner-css-without-images.html

basicly you put this in your css file:

#selector {
-moz-border-radius: 10px;
-webkit-border-radius: 10开发者_JS百科px;
border-radius: 10px;
}

and

<div id="selector">

Why does my site not show rounded corners on my divs? I have tried with Firefox and Chrome.

You forgot to specify a border!

You need to change your CSS to this in order to display the border:

#selector {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
}

in asp.net its easy to implement rounded corner to panels using ajax, try the following:

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
    </div>
    <asp:Panel ID="Panel1" runat="server" BackColor="AppWorkspace" Height="188px" Width="271px">
    </asp:Panel>
    <ajaxToolkit:RoundedCornersExtender ID="Panel1_RoundedCornersExtender"
        runat="server" Enabled="True" TargetControlID="Panel1" Radius="15">
    </ajaxToolkit:RoundedCornersExtender>
    </form>
</body>
</html>