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
Related
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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make rounded border in IE8 with CSS?
I set this code for Border. I need to set rounded corners for this border.
This code works with E9, I need it to work in old browser like IE6, IE7, IE8
My code in CSS
border-radius: 11px 11px;
border:1px solid #373737;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
I suggest CSS3 PIE - http://css3pie.com/
PIE makes Internet Explorer 6-9 capable of rendering several of the
most useful CSS3 decoration features.
There is no support of border-radius in older browsers, you got to use scripts such as CSS3Pie to get it working in them.
Be aware that in your CSS, you will have to use behaviour property which isn't valid and will cause your CSS not to validate against W3C Validator.
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/
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
OK, I have my site going pretty well here: http://www.marioplanet.com
But I've realized that if the end-user's monitor is big enough to display the animation on the sides of the pages (which mostly every desktop's monitor and some laptop's can) than I believe my main content would look better with a little red / black border, and some rounded corners, and perhaps even a dropshadow.
Now, I am looking for the easiest way to implement both the border and the rounded corners, and hopefully the dropshadow, but that's not as necessary, with the smallest amount of code.
If I can make it work with just CSS for most browsers except for IE and fallback to a jQuery / JS plugin for IE, that's great too. Or even leave it out of IE completely, but that's not too nice! :)
UPDATE:
OK, I can get it to apply to my header <div> as you can see live right now, but when I try to apply it to the overall wrappter <div>, I get nothing. It may be because I need to have the width and height properties specified in my CSS first.
Thanks!
UPDATE UPDATE:
I found the easiest way to do the borders was by using the following CSS3 selectors:
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
Which all work like a charm!!
CSS3 can do all that you need, and most browsers support it except IE8. (The next version of Internet Explorer will support these features though.)
Visit css3.info for more information.
UPDATE
I've started using http://css3please.com/ recently. It's equally great!
Check this out: http://css3pie.com/
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
It is easy to use and integrate, it allows you to use CSS3 features like border-radius, shadow, gradient backgrounds, etc... and best of all... it is compatible with IE!
I hope this helps!
jquery corner plugin is the best plugin to create a rounded corner, and Dropshadow is good one drop shadow effect. Its literally tow lines of code(ignoring the plugin code) :)
http://www.cssplay.co.uk/boxes/four_cornered.html
http://www.cssplay.co.uk/boxes/ has the rounded corners, dropshadow and more. 100% CSS with no use of JS, and works in IE.