-
200618 Nov
Recently I had to code a box with rounded corners for a client, and I came up with a solution which works with 99% of the browser market and uses the CSS3 border-radius declaration for browsers which support it.
The simplified HTML code is:
<div class="curves top"> <img src="https://www.css3.info/wp-content/uploads/2009/09/topl.png" width="10" height="10" alt=""/> </div> <div class="box"></div> <div class="curves bottom"> <img src="https://www.css3.info/wp-content/uploads/2009/09/botl.png" width="10" height="10" alt=""/> </div>
The divs .top and .bottom will be hidden from browsers which support border-radius (or a proprietary implementation of it).
The basic CSS is:
div { margin: 0; padding: 0; width: 100px; background-color: #ff0000; } .box { min-height: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .curves { display: none; }This will display a box 100×100 pixels with curved corners in Firefox and Safari, hiding the .top and .bottom divs and implementing border-radius.
To make it display in IE, we add some conditional comments with extra CSS which displays the .top and .bottom divs with four rounded corner images:
<!--[if IE]> <style type="text/css"> .box { min-height: 80px; } .curves { display: block; height: 10px; } .top { background: #ff0000 url('images/topr.png') no-repeat right top; } .bottom { background: #ff0000 url('images/botr.png') no-repeat right top; } </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css"> .box { height: 80px; } <![endif]--> </style>The main drawbacks with this method are that the CSS won’t validate and it only works with fixed width boxes; however, a little recoding will fix this second problem.
Users of Opera and other browsers will see a square box; as my client is corporate and has never received a hit from an Opera browser, I was willing to make this sacrifice. If they ever implement -opera-border-radius I could add this in.
Of course there are other solutions for this, but I thought this way was quite simple.
You can skip to the end and leave a response.
-
Comments
-
01.
Doesn’t o-border-radius work? I do seem to recall they had something like this implemented…
-
02.
It seems that they used to support it, but I’ve tried both -o-border-radius and -opera-border-radius and neither works, so it looks as if they’ve removed support.
-
03.
What’s the point of doing it in CSS if you have inline presentational images in the mark-up? Seems like a big addition to the page weight.
-
04.
Because IE doesn’t support border-radius. It’s not intended to be a definitive solution, just to show a way that I used a CSS3 declaration.
-
05.
I think proprietary is the wrong to use term. Mozilla is open-source. I think you’re looking for non-standard
-
06.
Grimboy: It’s proprietary in the sense that the implementation, -moz-border-radius for example, is limited only to Gecko-based browsers. The way it’s implemented (-vendor_goes_here-property) is very much standard … the CSS spec has provisions for this method.
-
07.
-
08.
Now that Opera 9.5b is released, it still doesnt support CSS3’s border-radius property ?
-
09.
kosalaram says:Comment » February 24th, 2008 at 8:18 am
the rounderd borders in not working in IE6 & 7 what is the solution to use the code of css3 for border’s ?
-
10.
Here’s a variant that uses border-radius for Safari and FF3, with corner image fallback for IE7. Supports variable width boxes and the same HTML for both cases.
-
11.
-
12.
-
13.
I’ve read on one of Russian blogs that Opera supports SVG as a background. Try it for rounded corners!
-
14.
“border-radius will be supported from Presto 2.3 onward (ie after Opera 10, which is Presto 2.2 ”
-
15.
@Anjanesh
Thanks for the head up, do you know if they will use “-opera-border-radius” or “-border-radius” or something else?Well does not matter, am downloading it now. I will post and find out.
-FireDart
-
16.
Well got my answer…
Currently in Opera 10 Beta they do not support:
-opera-border-radius or -border-radiusSo sad….
-
17.
The engine used in Opera 10 is Presto 2.2.
Presto 2.3 will support border-radius – which version of Opera that may be. -
18.
Probably the full release of Opera 10. Since Beta2 uses 2.2.15.
-
19.
-
20.
The next major version of Opera Desktop after Opera 10 will likely skip Presto 2.3 (which is already finished) and move to Presto 2.4.
http://my.opera.com/dragonfly/blog/show.dml/3953056#comment9599557 -
21.
Nobody uses opera except you guys so it shouldnt matter too much if it doesnt work there.
-
22.
-
23.
>Opera is the leading browser in Russia…
it’s bull shit! -
24.
-
25.
Pasha, I disagree with you.
I have access to stats on 7 russian sites (some are popular, some — highly tailored). Here is sorted list of opera percent from all visitors:
21% 29% 29% 33% 43% 58% 57%
Period = start of year 2009 to now
So is the opera leading browser in Russia? I see that the answer very depends on site we are looking at.
The average answer is: opera is very popular.
-
26.
Opera is popular not only in Russia, but in CIS countries as well.
-
27.
Daniel says:Comment » December 20th, 2009 at 1:04 am
Opera beats most other browsers, including Firefox, in terms of performance and memory usage. Over the past two years (when Firefox’s performance got worse and worse), Opera has more than doubled its market share (from less than 1% to around 2.3% globally). True, the absolute market share is still low, but the tendency is clear. Opera should not be neglected. Its user base seems to be particularly focused on young and technologically adept people. For many websites, this is an audience they do not want to ignore.
-
28.
Opera 10.50 pre-alpha supports border-radius
and opera mini is the most powerfull browser for MIDP, it also supports text-shadow, better than IE8 ! -
29.
Can any one konws that what is the alternative of border radius for IE? (if possible without using images)
-
30.
Tim says:Comment » January 24th, 2010 at 5:58 am
There isn’t one, at least not yet. According to IEBlog, it’s coming in IE9.
-
31.
@ Tim
That’s right. IE 9 will support CSS3 and HTML 5 ! -
32.
James says:Comment » February 24th, 2010 at 8:17 pm
Opera's 10.5 Beta does support border-radius. No added CSS needed.
-
33.
Anthony says:Comment » March 2nd, 2010 at 4:22 am
I don't really see the issue. Why spend extra time coding for the lowest common denominator (in this case, IE7)? Just use standard CSS border radius properties. If a browser doesn't support it, they will see square edges. So what? It's graceful degredation – the site won't look broken. I bet the user doesn't even care.
-
34.
azra says:Comment » March 4th, 2010 at 4:24 am
The user won't care, the webmaster shouldn't care, but the boss – who lacks the knowledge but totally got the last word – cares. "This looks different here and here, fix that.". You want to try to reason with him? Good luck. ;-)
-
35.
-
36.
CSS3: 20 tutoriales | Diseño web, accesibilidad, usabilidad, posicionamiento y optimización web - AlmacenPlantillasWeb Blog says:Comment » March 21st, 2010 at 11:38 am
[…] A border-radius solution with CSS3 […]
-
37.
HTML/CSS Dubbel aantal pixels in IE - 9lives - Games Forum says:Comment » April 14th, 2010 at 1:46 pm
[…] Nu zie ik het inderdaad Css3, of liever ik zie het eigenlijk niet want ik werk met windows xp en dit kan enkel gezien worden met Vista of Windows7. Css en IE is altijd een leuke combinatie Misschien kan dit u helpen LINK […]
-
38.
-
39.
pierpaolo says:Comment » May 20th, 2010 at 1:54 pm
here a .htc file to work border-radius at E7
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser -
40.
For some reason, this is not working in IE7 for me.
I suppose that older browsers also have problems with it!
-
41.
I generally regard css3.info as a good resource, but I am disappointed here. This tutorial is bordering on irresponsible. Presumably, this site’s target audience is mostly newer coders just learning this stuff. Many readers may not realize that this code is the epitome of bad practice.
“The main drawbacks with this method are that the CSS won’t validate and it only works with fixed width boxes.”
Actually, the entire method is nothing but drawbacks. To review:
1. This method uses meaningless, non-semantic divs and decorative images in the markup, for purely presentational purposes – not good. The result is a bloated, cluttered mess. This code is downloaded by ALL browsers.
2. It then uses CSS to hide those extraneous divs and images. The underlying markup is still there, the content is merely hidden. Again, this code is downloaded and parsed by ALL browsers.
3. It then uses conditional comments to reapply the display of those extraneous divs and images in IE, plus feed that browser at least a couple more background images.
Such coding practices are like cutting off your nose to spite your face.
If it is a requirement that IE8 and below (and other browsers that don’t understand border-radius) must get the rounded corners, there are well-documented, cross-browser CSS background-image-based methods which are far more optimized and advantageous.
– For fixed width, you only need two html elements – one for each CSS background image (top and bottom). Those html elements could be a div and header which are likely already in your existing markup in most cases.
– For flexible width, you will need four elements (one for each corner image). But again, likely you will have most of this already in your existing markup and may only need to add an extra wrapper div or two in most cases.
Of course, the best practice and most forward-compatible method is to use only the minimal semantic markup and let CSS do the heavy lifting with border-radius. Modern browsers that support this bit of CSS3 get rounded corners. Consider this a visual reward. Less-capable browser’s get served square borders. They are missing only a decorative flourish. No big deal.
-
42.
I found that this works for the most part…
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
Worked On:
Safari 5.0.2
Android Browser on Froyo
FF 3.6.12
Opera 10.63
Chrome 8Didn’t work in IE
I’m sick of writing a whole different set of code to make IE work the way it’s supposed to!
For all my browser testing, I use http://browsershots.org
-
43.
-
44.
odishawebdesign.com :: Blog » Blog Archive » 20 Very Useful CSS3 Tutorials says:Comment » February 1st, 2011 at 2:05 pm
[…] 17.A border-radius solution with CSS3 […]
-
45.
CSS Rounded Corner Tutorial - Create Rounded Corners Without Images | Erica Says says:Comment » February 15th, 2011 at 4:14 pm
[…] *Please note that Internet Explorer doesn’t play nice with rounded corners using css. If you’d like rounded corners to show in IE you’ll need to use images for the corners. Here’s a tutorial on creating rounded corners with css and images. […]
-
46.
CSS3 cannot work in IE8 and lower versions but works in IE9
-
47.
-
48.
-
49.
Here’s a variant that uses border-radius for Safari and FF3, with corner image fallback for IE7. Supports variable width boxes and the same HTML for both cases.Forex Programming
-
50.
You guys should use http://www.css3pie.com for rounded corners in IE. Works perfectly! Just don’t forget to use position:relative on your stuff.
-
51.
Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!! Thumbs up
-
01.
