互联网资源管理器的圆角

Question

I'm working on this site http://www.claybrookanimalfeeds.co.uk/contact.php and I would like to get rounded corners on the shop opening times box on the right hand side.

Now I've managed to get them to work in Firefox, chrome and opera but for some reason they are not working in internet explorer. I've tried different ways of doing it (including PIE) but none of them seem to work. Either I've translated the code so that it fits mine wrongly or it's just not working.

Any help would be appreciated.

Here is the css I'm using (it's quite long), the part of the code I want to have the rounded corners on is under the opening times section

@charset "utf-8";
/* CSS Document */
body {
background-color:beige;
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
}

#wrapper {
width:960px;
background-color:beige;
margin:0 auto;
}
/*Header*/
#header {
height:150px;
}

h1 {
text-align:center;
color:darkgoldenrod;
font-size:36px;
}

#p1 {
text-align:center;
color:darkgoldenrod;
font-size:18px;
}

/*Header End*/

/*Navigation Bar*/
#nav {
width:100%;
float:left;
margin: 0 0 1em 0;
padding:0;
background-color:darkgoldenrod;
border-bottom:1px solid #ccc;  
}

#nav ul {
list-style:none;
width:800px;
margin:0 auto;
margin-left:100px;
padding:0; 
}

#nav li {
float:left;
width:250px;
text-align:center;
}

#nav li a {
display:block;
padding:8px 15px;
text-decoration:none;
font-weight:bold;
color:white;
border-right:1px solid #ccc; 
}

#nav li:first-child a {
border-left:1px solid #ccc; 
}

#nav li a:hover {
color:white;
background-color:blue; 
}

/*Navigation Bar End*/
#content {
width:675px;
float:left;
margin-left:10px;
padding:10px;
}

/*Slideshow*/
#slide-show {
margin-left:150px;
}

#slide-images {
display:block;
margin:0px;
padding:0px;
width:300px;
height:224px;
overflow:hidden;
}

#slide-images li {
display:block;
list-style-type:none;
margin:0px;
padding:0px;
background-color:#FFFFFF;
}

#slide-images li img {
display:block;
background-color:#FFFFFF;
}
/*Slideshow End*/

/*Opening Times*/
#openingtimes
{
float:right;
height:200px;
width:200px;
background-color:white;
text-align:center;
border-style:solid;
border-width:medium;
border-color:black;
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px;
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000;
}
/*Opening Times End*/

/*Form*/
#form {
float:left;
}
/*Form End*/

/*Sidebar*/
#sidebar {
width:200px;
float:left;
margin-left:10px;
margin-bottom:25px;
background-color:tan;
text-indent:10px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
filter:
    progid:DXImageTransform.Microsoft.DropShadow(color=black, offx=5, offy=10)
}

#sidebar li {
list-style: none;
position: relative;
height: 30px;
padding:0 20px;
background-color:tan;
color: #45371E;
line-height: 20px;
cursor:pointer;
}

#sidebar li a {
text-decoration:none;
color: #45371E;
background-color:transparent;
display:block;
} 

#sidebar li:hover {
background-color: #CD853F;
} 
/*Sidebar End*/

/*Footer*/
#footer {
clear:both;
width:960px;
height:135px;
border-top:1px solid #ccc;
text-align:center;
}

#footer p {
padding:10px;
}
/*Footer End*/

Answer 1

border-radius property works on IE9=+ so if you are trying it on IE8 <= than it wont work, better use jQuery instead

http://www.malsup.com/jquery/corner/

Also use this website to check CSS property support for various browser, very handy for developers

www.caniuse.com

Answer 2

So ie9 and above support this http://caniuse.com/border-radius For IE6+ you can use a polyfill: http://css3pie.com/

Hope this helps.

So for your example using CSSPIE:

border: 1px solid black;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
behavior: url(/pie/PIE.htc);