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.
Related
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
Working on my home page where I'm cycling through some images using JQuery's fadeIn and fadeOut methods.
The images have a border of 2px and a radius of 14px applied.
As you can see, the corners of the image are overlapping the border.
This behavior only happens in Safari and Chrome, not in Firefox and IE.
Anyone have any idea as to why?
You can see this behavior here:
http://www.findyourgeek.com/index-copy.php
Thanks.
Support for border-radius on images in Chrome/Safari (or rather Webkit) seems to be a bit buggy
Chrome -webkit-border-radius bug? - CSS-Tricks Forums
The above post is from earlier in the year (~Chrome ver 10) when the support for border-radius on images wasn't working. Support is available know but like you're seeing it still has some issues. You may want to report the bug you're seeing to the Webkit/Chrome/Safari projects. I know there was a fairly easy to find bug reporting page for Chromium, not sure about the other two.
Here are two ideas for workarounds:
you can apply sort of a CSS3 hack by removing the 2px border and setting a 2px stroke box-shadow (box-shadow:0 0 0 2px #606060;). This would have a few drawbacks as it's only a fix for Chrome/Safari example jsfiddle
or of course the other option is to edit the photos to give them rounded corners (http://www.roundpic.com/ is a good site for this)
try removing the border styling from the image itself and adding it to #content #topStoriesTest
#content #topStoriesTest {
border: 1px solid #CCCCCC;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
height: 318px;
overflow: hidden;
position: relative;
width: 549px;
}
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.
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.
On this link boxover.swazz.org/ we see the box over with heading and content. I need to do the same thing but with rounded corners. Can anyone suggest me?
Thanks in advance........
.box{
-moz-border-radius: 2em 1em;
border-radius: 2em 1em;
}
Works in FF and browsers with webkit core (Safari, Konqueror).
If you need IE support, use sliding doors.