Curve border is working on Firefox ,Google Chrome but not working on IE?any idea how to do make it work ?
-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-开发者_运维技巧top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;
Unfortunately IE6-IE8 do not support rounded borders. Instead you would need to use something like CSS3PIE.
IE9 however DOES understand border-radius
Update further to comment that it 'won't work' - here is a quick step-by-step (this is a very simple, high-level sample.
- Download CSS3PIE at http://css3pie.com/download-latest
- Save the .htc file in the root of your site
Lets say you have a div with the id of foo:
<div id="foo">Hello, I'm rounded</div>
Your CSS for this could be:
#foo { width: 500px; height: 200px; background: blue; -moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ }
You simply need to add one more rule to the bottom of that CSS, as follows behavior: url(/PIE.htc);
This will cause CSS3 to apply your border-radius rules to IE6-8.
It will only work in IE9, and you have to use the CSS3 standard.
Support for "border-radius" in IE
-moz
and -webkit
won't work in IE ever, since they are for other render engines.
use make a curve border .ping image in photoshop and use it .....because border-radius-bottomleft ,border-radius-bottom right etc not work on ie6-8....only border-radius property work in ....
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
border-radius-bottom right*/ not working in ie6-8
精彩评论