I set a curve style for button and tab control. It's working properly in Firefox, but not in IE.
Here is the CSS:
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px; /* Experimental implementation of CSS 3 feature for webkit */
-moz-border-radius: 15px; /* Experimental implementation of CSS 3 feature for Mozilla */
-o-border-radius: 15px; /* Experimental implementation of CSS 3 feature for Opera */
border-radius: 15px; /* CSS 3 feature that is not yet a recommendation */
You shouldn't expect to see support in it for Internet Explorer (except version 9 beta)
However, it is just cosmetic, so don't worry about it. People using Internet Explorer just don't get curved corners — it isn't a big deal, the content is still available.
IE isn't able to work with that.
If you want to curve your edges in IE you'll have to use another approach.
You can't do this in IE I believe. There are some hacks to get it to work though. I've used this before and I think it good with older vs. of ie too. http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
If you really wnt a curved corner in IE go to Curvycorners & download a stable version of it. Its just a javaScript file. Then refer the "curvycorners.src.js" file from your project & write the same CSS code you are writing "-webkit-border-radius: 15px;
-moz-border-radius: 15px;
" except the other two properties. It will definitely work. Works for me, so for you.
if you want to apply CSS in IE8 or greater then it may no need to changes in CSS as you declare in FF but if you need to use IE7 then you may need to use below syntax.
#webkit-border-radius: 15px;
#moz-border-radius: 15px;
#o-border-radius: 15px;
#border-radius: 15px;
Thanks.
Related
I would like to know how to apply border-radius to IE8 and below IE8 browsers.
I know that border-radius is a HTML5 feature and IE8 doesn't support it.
I found that by using .htc we can achieve this but by using htc I am encountering the problem of black background.
I am unable to overcome this problem.
Is there any other way of applying border-radius to IE8? If so can anyone explain me how?
Option 1
http://jquery.malsup.com/corner/
Option 2
http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip
Option 3
http://css3pie.com/
Option 4
http://www.netzgesta.de/corner/
Option 5
See this question
EDIT:
Option 6
https://code.google.com/p/jquerycurvycorners/
Firstly for technical accuracy, border-radius is not a HTML5 feature, it's a CSS3 feature.
The best script I've found to render box shadows & rounded corners in older IE versions is IE-CSS3. It translates CSS3 syntax into VML (an IE-specific Vector language like SVG) and renders them on screen.
It works a lot better on IE7-8 than on IE6, but does support IE6 as well. I didn't think much to PIE when I used it and found that (like HTC) it wasn't really built to be functional.
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features
http://css3pie.com/
................................................................................
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera, because it is CSS3 property.
so, you could use css3pie
first check this demo in IE 8 and download it from here
write your css rule like this
#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/pie_files/PIE.htc);
}
note: added behavior: url(path/to/pie_files/PIE.htc); in the above rule. within url() you need to specify your PIE.htc file location
As the answer said above, CSS PIE makes things like border-radius and box-shadow work in IE6-IE8: http://css3pie.com/
That said I have still found things to be somewhat flaky when using PIE and now just accept that people using older browsers aren't going to see rounded corners and dropshadows.
HTML:
<div id="myElement">Rounded Corner Box</div>
CSS:
#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
behavior: url(PIE.htc);
border: 1px solid red;
}
PIE.htc file can be downloaded from http://www.css3pie.com
I need to have a container "DIV" with rounded corners. The following code works perfectly on all browsers except my IE10. I have no clue how to do in order to make it work.
#about-kader {
width: 200px;
height: 180px;
float: left;
margin: 0px auto;
background-color: #9bafc4;
padding: 3px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-ms-border-radius: 5px;
behavior: url(border-radius.htc);
}
And here's the HTML part, please:
<div id="about-kader">
...
...
...
</div>
There is no way to make any round corner visible on IE10. The version I have is: 10.0.9200.16576, Update versions: 10.0.5 (KB289530).
Thanks to Flipbed's answer I found the answer. On IE10, the "border-radius" to me doesn't work. In order to get it working, it's necessary to specify each corner:
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
Indeed the site you sent, does exactly that (look the page source). It gives as output the instruction:
border-radius: 5px;
but internally it declares the 4 corners separately as above.
This was extracted from the question and posted on the OP's behalf.
Try only using border-radius: 5px, does it work then? If it does, then add the extra border-radius properties one by one until you find where the problem arises. I suspect that it is one of the extra border-radius properties that is causing a problem. I suspect that the behavior might be the source of the problem.
The behaviour of border radius is affected by compatibility mode in IE10.
If you press F12 you can view the developer console and change the compatability settings.
If the Document mode is set to IE7 or IE8 Standards then the border-radius 5px doesn't work, however if the standards mode is set to IE9 Standards or Standards then it behaves as expected.
I have ended up turning off compatibility mode as it also breaks the behaviour of other websites I use.
Ravenstar68
I am using the following style for an ASP.NET button. It is working in Chrome, but I am not getting the rounded corners in IE. How to fix this?
.button
{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
color:white;
background-color: #BD90DE;
}
IE<9 does not support rounded corners.
You can use CSS3PIE or other libraries to fake them.
Border-radius only works in IE9.
Also, it will only work if quirks mode is not on. Press F12 to open the developers windows, and check at the top that Browser Mode and Document mode are set to IE9.
There doesn't seem to be a way to support border-radius other than to provide the CSS for each engine separately. Right now it seems you have to declare the property three or four times (possibly more if you want to support more obscure engines).
My interim solution is to pass all of my CSS through this regular expression:
Regexp:
border(-)?(top|bottom)?(-)?(left|right)?-radius:(.+?);
Replace:
-moz-border-radius$1$2$4:$5;
-webkit-border$1$2$3$4-radius:$5;
-khtml-border$1$2$3$4-radius:$5;
border$1$2$3$4-radius:$5;
This searches for all instances of the official CSS3 selector and replaces it with itself, plus the engine-specific selectors for Mozilla, WebKit and KHTML.
Is there a better way?
When are WebKit and Mozilla planning to support the CSS3 selectors? (Do they already?)
It should be :
.myClass
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
with border-radius below the other one.
why ? Because, now that new browsers doesn't need their own engine hack anymore (like firefox 4 for example), they should use the last command they receive in the CSS file. That way, the rounded corner should be the same in all browser understanding CSS3 specifications and you won't have to change your CSS soon.
For all four corner you can use the following one
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
and if you want to add curve at any one corner (for now i show the bottom left) try the below
-webkit-border-bottom-left-radius: 4px;
-khtml-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-radius-bottomleft: 4px;
Thanks
Like this in CSS:
.myClass
{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
IE is the only browser that currently doesn't support it (until IE9 makes its launch). But until then you can use this script: DD Roundies. This is a script that will round the corners in IE, with a little bit of setting up. There is another one here at Curvy Corners which looks for the webkit rule and adds them to IE as well.
My css is not working with Iexplorer, can someone explain me why this isn't working?
The HTML
<div class="myBox"> Content <div>
The CSS:
.myBox {
margin: 0.0in auto;
color: #FFF;
width: 450px;
height:450px;
padding: 12px;
text-align: left;
background-color: #444141;
border: 0px solid #4e4b4b;
/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.myBox h2 {
color:#f57f20
}
IE doesn't support CSS3 rounded corners, I'd suggest a fallback to using PNG images.
Just use the CSS3 property border-radius. Sure, it probably won't work until IE9, which goes back to the age old question...
Do web sites need to look exactly the same in every browser?
You should use htc file to curve corners in IE6+. In IE9 the CSS3 declarations will work. How to use htc file to curve corners you can find here http://starikovs.com/2010/08/24/css3-rounded-corners/.
Because IE does not support custom Mozilla or WebKit properties.
An option could have been using CSS3 browser-independent round corner properties, but it is not yet widely implemented across major browsers. So for now you'll have to stick to images if you want cross-browser compatibility or function with JavaScript disabled.