开发者

CSS curve border in IE not working

开发者 https://www.devze.com 2023-03-09 04:12 出处:网络
Curve border is working on Firefox ,Google Chrome but not working on IE?any idea how to do make it work ?

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.

  1. Download CSS3PIE at http://css3pie.com/download-latest
  2. Save the .htc file in the root of your site
  3. 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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号