A border-radius solution - CSS3 . Info

200618 Nov
A border-radius solution
by Peter Gasston
Posted in Tutorials
Tweet

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="http://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="http://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:
```



</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.
  
  Joost de Valk says:Comment » November 19th, 2006 at 10:13 am
  
  Doesn’t o-border-radius work? I do seem to recall they had something like this implemented…
- 02.
  
  Peter Gasston says:Comment » November 19th, 2006 at 2:44 pm
  
  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.
  
  Mountain/\Ash says:Comment » December 23rd, 2006 at 8:00 am
  
  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.
  
  Peter Gasston says:Comment » December 23rd, 2006 at 4:58 pm
  
  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.
  
  Grimboy says:Comment » March 6th, 2007 at 8:09 pm
  
  I think proprietary is the wrong to use term. Mozilla is open-source. I think you’re looking for non-standard
- 06.
  
  Rob says:Comment » July 24th, 2007 at 4:18 am
  
  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.
  
  Estelle says:Comment » August 13th, 2007 at 4:15 am
  
  BTW, your site falls over in IE 6.
- 08.
  
  Anjanesh says:Comment » October 31st, 2007 at 2:24 pm
  
  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.
  
  Masterleep says:Comment » September 18th, 2008 at 1:10 am
  
  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.
  
  http://www.bestinclass.com/blog/2008/simple-rounded-corners-with-css3-box-radius-and-fallback-for-ie/
- 11.
  
  George says:Comment » June 8th, 2009 at 3:48 pm
  
  Don’t forget -khtml-border-radius
- 12.
  
  truffo says:Comment » June 19th, 2009 at 1:34 pm
  
  Anyone has a solution for opera browser ?
- 13.
  
  Softwayer says:Comment » June 22nd, 2009 at 6:23 pm
  
  I’ve read on one of Russian blogs that Opera supports SVG as a background. Try it for rounded corners!
- 14.
  
  Anjanesh says:Comment » June 25th, 2009 at 8:02 pm
  
  “border-radius will be supported from Presto 2.3 onward (ie after Opera 10, which is Presto 2.2 ”
  
  http://dev.opera.com/forums/topic/258986
- 15.
  
  FireDart says:Comment » July 10th, 2009 at 12:29 am
  
  @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.
  
  FireDart says:Comment » July 10th, 2009 at 12:33 am
  
  Well got my answer…
  
  Currently in Opera 10 Beta they do not support:
  -opera-border-radius or -border-radius
  
  So sad….
- 17.
  
  Anjanesh says:Comment » July 11th, 2009 at 10:42 am
  
  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.
  
  MeanEYE says:Comment » July 21st, 2009 at 3:13 pm
  
  Probably the full release of Opera 10. Since Beta2 uses 2.2.15.
- 19.
  
  Fungio says:Comment » July 28th, 2009 at 10:06 am
  
  -o-border-radius ;)
- 20.
  
  Old Nick says:Comment » August 5th, 2009 at 11:01 pm
  
  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.
  
  DRoss says:Comment » September 9th, 2009 at 5:21 am
  
  Nobody uses opera except you guys so it shouldnt matter too much if it doesnt work there.
- 22.
  
  Krang says:Comment » October 11th, 2009 at 12:22 am
  
  Opera is the leading browser in Russia…
- 23.
  
  Pasha says:Comment » October 17th, 2009 at 2:04 pm
  
  >Opera is the leading browser in Russia…
  it’s bull shit!
- 24.
  
  Ant says:Comment » October 18th, 2009 at 8:33 pm
  
  @Krang.
  
  which is wonders me, why.
- 25.
  
  DJ-Andrey-sXe says:Comment » November 18th, 2009 at 3:21 pm
  
  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.
  
  Old Nick says:Comment » November 22nd, 2009 at 9:05 pm
  
  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.
  
  Bastien says:Comment » January 4th, 2010 at 6:07 pm
  
  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.
  
  Pkachhia says:Comment » January 21st, 2010 at 11:11 am
  
  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.
  
  Quaddi says:Comment » January 25th, 2010 at 4:16 pm
  
  @ 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.
  
  Tim says:Comment » March 17th, 2010 at 3:40 pm
  
  So true azra.
- 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.
  
  Sagar says:Comment » May 5th, 2010 at 9:16 am
  
  I agree with u but not satisfied
- 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.
  
  Shuri says:Comment » November 21st, 2010 at 9:06 pm
  
  For some reason, this is not working in IE7 for me.
  
  I suppose that older browsers also have problems with it!
- 41.
  
  David | WebModia says:Comment » November 27th, 2010 at 1:14 am
  
  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.
  
  Marcus says:Comment » December 10th, 2010 at 8:21 pm
  
  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 8
  
  Didn’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.
  
  Michel Wilhelm says:Comment » December 22nd, 2010 at 3:26 pm
  
  IE is a bad guy for CSS3…
- 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.
  
  Gopi Krishna says:Comment » June 15th, 2011 at 1:51 pm
  
  CSS3 cannot work in IE8 and lower versions but works in IE9
- 47.
  
  Zain says:Comment » July 8th, 2011 at 10:02 am
  
  Border radius not support in IE 7 , IE 8 . Why?
- 48.
  
  jryan says:Comment » July 16th, 2011 at 4:22 pm
  
  for opera just put.
  
  border-radius: 10px;
- 49.
  
  Forex Programming says:Comment » August 23rd, 2011 at 3:23 pm
  
  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.
  
  Jimmie says:Comment » October 12th, 2011 at 10:00 am
  
  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.
  
  best camera says:Comment » November 3rd, 2011 at 4:06 pm
  
  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
- 52.
  
  Ketu says:Comment » February 14th, 2012 at 11:32 am
  
  hmm its right! css3pie id best technology ever.
- 53.
  
  Click Here says:Comment » May 18th, 2012 at 2:07 am
  
  That’s great ideas…Thanks for sharing !
- 54.
  
  alix says:Comment » July 14th, 2012 at 3:21 pm
  
  Hi
  
  When I was in my previous job our graphiste was loving curved corners
  Oh my … We made a lot different version of round box User Controls (ASP.net)
  
  BUT finally a day I decided to resolve this problem
  FIRST DIE TO IE, I HATE IE beeeb IE beeeb IE
  
  OK what’s the salvation for us in IE FF SAFARI CHROME and even NetScape(oh grandfather)
  
  /*IE*/
  behavior:url(/css/PIE.htc);
  /*google it for download. If I don’t mistake it’s(PIE) one type of vml*/
  z-index:1 /*or more*/
  border-radius:4px;
  
  /*I think that was for chrome and safari*/
  -webkit-border-radius: 4px;
  
  /*netscape (limited)*/
  -khtml-border-radius: 4px;
  
  /*mozilla*/
  -moz-border-radius: 4px;
  
  /*OPERA : thank you friends for telling this opera trick at this page*/
  -o-border-radius: 4px;
  -opera-border-radius: 4px;
  
  However still I’m using Opera 10.00 for testing my markups and I have not seen any radius so far but based on the comments of our friends in this page I’m hopeful for the future of opera.
  
  Have a sweet time
- 55.
  
  خلطات لتطويل الشعر says:Comment » November 7th, 2012 at 9:35 am
  
  I love this website and still have bookmarked it. Let me return to learn in more details on my tripThank you.
- 56.
  
  caftan marocain says:Comment » February 11th, 2013 at 9:28 pm
  
  its actually very nice to know that there still some websites that offers precious and valuable content for completely free :)
- 57.
  
  caftan short dress says:Comment » July 5th, 2013 at 1:26 am
  
  Have you ever thought about adding a little bit more than just your articles?
  I mean, what you say is important and all. But think about if you added some great pictures or video clips to give
  your posts more, “pop”! Your content is excellent but with pics and clips, this
  blog could definitely be one of the best in its niche.
  Superb blog!

Subscribe to our RSS

CATEGORIES

FRIENDS

Meta

Hosting by: