I have a div with border radius, I write the CSS code for all the browsers:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
but in IE it doesn't work!
What should I do?
Border radius does not work in IE until version 9.
See: Support for "border-radius" in IE
There are some suggestions on that answer as well as on Google for alternatives.
You may be required to use images for your rounded corners. You may be able to use a JavaScript based re-creation of rounded corners.
I think using PIE.htc for all css3 styles will be better. I have used it in many of my projects and works fine in IE7/8/9.
Here is the link. http://css3pie.com/ This will provide you various demos for that and it is really helpful.
Thanks.
If you're using IE8 or older, you have to do that with images or some sort of javascript plugin. If you're using IE9 or newer, then that code works perfectly fine.
Here are some jQuery plugins that could solve your problem: http://plugins.jquery.com/plugin-tags/border-radius
Nifty Corners works as well in IE8.
Here is an example: http://jsfiddle.net/jCm7T/1/
Related
I have set border-radius (and -moz-border-radius for the older browsers) to 20px, and I have it working beautifully in Safari and Firefox. Then, I open up Chrome and it's refusing to accept the defined border-radius. Any suggestions to work around this in Chrome?
See the CSS coding in action here: http://jsfiddle.net/MAYea/
Screenshot in Safari:
Screenshot in Chrome:
It's not that border-radius isn't working, it's that overflow is failing to hide the overflow.
This is actually a new bug in Chrome. I have a similar problem on my Doomsday clock even though it worked perfectly in an earlier version of Chrome.
As a workaround, you can specify the border-radius on the contained elements as well as the container.
I had a similar issue, it helped to add
z-index: 0; /* or some other value */
but also
transform: translateY(0);
seems like this is enabling some kind of different rendering (guess nothing with 3d context like we sometime do to FORCE GPU rendering...)
the reason why this works I cannot not explain, maybe somebody else can?
I have this particular problem right now, with latest Chrome v44 on OS X 10.10.5...and yes, I know that this was "fixed" and it's an old question =)...
EDIT: Found the same fix in another SO-Question, check here: link
-webkit-border-radius: is what your looking for I think?
Add the border-radius: 20px; CSS rule to both :before and :after
DEMO
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-border-radius: for the Chrome
If you need it try this javascript library from here
You can use,
border-radius: 100
Instead of,
border-radius: 100px
it will do the job in IE but not in Chrome.
I'm thinking of creating a custom made rounded corners block using only divs, and I was curious to know what you guys think, if that's a good enough approach, or is there an easier way to get a cross browser support (While also supporting older browsers such as IE6)
I'll write a little simple explanation code for you guys to understand easily:
<div class="Block" style="position:relative">
<div>
Content will go here or something
</div>
<div name="TopLeft" style="position:absolute;top:0;left:0;"></div>
<div name="TopRight" style="position:absolute;top:0;right:0;"></div>
<div name="BottomLeft" style="position:absolute;bottom:0;left:0;"></div>
<div name="BottomRight" style="position:absolute;bottom:0;right:0;"></div>
</div>
In the real code, I'll give each one of them a background, and of course put it in a css file instead of writing it inline like that.
Use CSS3Pie.
This is a Javascript hack for IE that implements the border-radius CSS in old versions of IE.
If you need rounded corners in IE6-9 browsers you only need to use CSS3 border-radius and one PIE.htc file
Progressive Internet Explorer
div{ border-radius: 6px; -moz-border-radius: 6px; behavior: url(PIE.htc); }
This works best in all IE browsers
Yes, that will work fine.
You can also add the elements using script, that will make the markup cleaner. I use that approach here: bytbil.com
Doubt it will work in IE6, but you can use the following:
-moz-border-radius: 15px;
border-radius: 15px;
Put that in your CSS for a DIV and it will support most browsers, but again, not sure about IE6... It does definitely work on IE9, Safari (5+), FireFox(1.0+), Chrome(5+) and Opera(10.5+)...
I guess this would work, and it's as good as anything to support IE6.
Any solution that covers IE6 is bound to be an awful hack. I think it's really worth it to wonder if you really need it. I would prefer just using css rounded corners and let the chips fall where they may.
i know border-radius property wont support in IE7.
Is there any css tricks to do border-radius in IE7 browsers.
You can use CSS3 PIE to get this working.
To get it add the pie.htc file to the ROOT of your site. In your CSS file where you want to use border-radius add the following code:
behavior: url(path/to/PIE.htc);
In normal CSS the url is relative to the CSS file. For htc files it is relative to the ROOT of your website. This is important as it won't work otherwise. Blame Microsoft.
NOTE:
If it's not working still then add this to your selectors:
position: relative;
z-index: 0;
There are plenty of "tricks" to get rounded corners in browsers that do not support the "border-radius" CSS property. Just do a google search for "rounded corners css". This one seems promising for instance.
Currently, IE 9 and 10 are the only versions of IE that support border-radius. IE 8 and below do not support border-radius.
Check this http://css3pie.com/
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....
use that code for border-radius working well ....
**
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
**
and also see for border-radius http://css3pie.com/
given in detail in document
Can anyone tell me the the latest solution for implementing rounded corners with DIV tags? Is the PNG corner images still the best cross-browser solution? Is Jquery the best approach? How is everyone approaching the rounded corners problem?
Many thanks.
Erik
For most browsers, CSS3 provides a way.
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
No need for images anymore.
If you must support IE8 and earlier, here are a number of ways to accomplish rounded corners.
According to that Microsoft page:
Windows Internet Explorer 9
supports adding rounded corners to
elements using the border-radius
properties.
It also suggests these pages which claim to be updated:
25 Rounded Corners Techniques with CSS
CSS Rounded Corners 'Roundup'
Rounded Corners
Without having read all of these many approaches, I'd hazard a guess that there is no universal best solution at the moment. Until we can assume that pretty much all of our visitors have CSS3-compliant browsers, you have to make some choices.
The optimal solution at the moment is to use:
selector {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
That will work in "all" modern browsers including IE9, see: http://caniuse.com/#search=border-radius
By far the best workaround for older versions of IE is to use CSS3 PIE:
PIE makes Internet Explorer 6-8
capable of rendering several of the
most useful CSS3 decoration features.
PIE currently has full or partial
support for the following CSS3
features:
• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image
As you can see, you also get support for more CSS3 eye candy
Is it possible to make the corners of a thumbnail rounded using css?
EDIT - The html starting point is:
<img src='test.jpg' width='50' height='50' />
It has no css on it at the start and I be wanting to round the corners a little...
EDIT+NOTE: The moz-border method doesn't really round the corners of the image itself, which is what I was hoping for, instead it rounds the corners of a boarder square around the images. Looks ok...
To expand #Clayton's answer:
You can do it natively in any modern browser:
-moz-border-radius: 5px;
border-radius: 5px;
The vendor prefix -moz will likely disappear soon.
See this jsfiddle to see it in action. Notice, also, that the rounding is applied directly to the <img> element.
This works in all current versions of all 5 major browsers.
To phrase this better, the following two lines will achieve the desired effect in Firefox, Chrome, and IE9.
-moz-border-radius: 5px;
border-radius: 5px;
More information can be found here:
http://www.css3.info/preview/rounded-border/
To accomplish this in IE8, you will need to use javascript. This jquery plugin would do the trick: http://jquery.malsup.com/corner/
You can use border-radius. It doesn't work on <img> elements, but you could apply border-radius to a <div> with the image as the background-image.
This code will round all four corners and it also supports Opera.
img { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
Clayton's solution only rounds the top two corners, which may or may not be what you're looking for.
Yes using the nifty-corners technique. Nifty corners is an old way to produce rounded edges. It will function in all browsers (old and new browsers)
http://www.html.it/articoli/nifty/index.html