CSS Rounded Corners

Discussion

1. Danz

   I actually used curvy corners js but it became a pain to use. esp when an element uses two or more classes or a child. the corner takes importance regardless if you use multiple classes in the stylesheet.
   For Example:
   .round { border-radius: 5px; }
   vs
   .menu.round { border-radius: 15px; }
2. Joe

   I found another CSS only method which works on all browsers from Internet explorer 6.
   http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
   It seems very promising and straight forward solution.
• Mark

  I tried to use the HTC file method. Proved more complicated for me than the meta tag method. It may be easier for those familiar with using HTC files in the root directory of the server, but have to admit, the meta tag method does not require calling yet another file to use in the display of the web page. Have to consider that servers get buggy at times and calling files may be delayed or fail which ruins the purpose of a HTC file. Hence the meta tag method is far simpler.
3. kpower

   David, what do you think about Pie?
   According to me, it’s much better to setup corners in one (css) file, instead of two (css + js or js script in some template file). Also Pie requires only one additional line to use (and the file, of course).
4. Sebastian Thomas

   Is this site displaying curved corners in IE 8 for anyone?
5. Devang

   Nice discussion on curvy corners.
   I specifically liked the part on IE9 where meta tag is used.
6. wilbert

   where can I download the script?
7. Toyin

   Very very useful. you saved my day of headaches with IE
8. Brad

   Note that there is a bug in IE9 when using rounded corners and background gradients: the background gradient will be bleed outside of the rounded corners.
9. Sheldon McGee

   In Firefox if I put an image in an element and then use border-radius, Firefox clips the image and it looks great! Works the same way in IE9. In Chrome (or any webkit browser) the border is rounded but it doesn’t clip the image and it looks horrible. What am I doing wrong? I’m about to post this on stackoverflow and see what hit . . . just gotta get some screenshots together.
• Lincoln Margison

  Try putting it inside a separate div with overflow:hidden
10. Sheldon McGee

    I just posted on Stack Overflow and I know I shoulda put it in webdesign.stackexchange.com or something like that. Oh well. http://stackoverflow.com/questions/6127613/how-do-i-round-the-corner-of-images-in-chrome-and-other-webkit-browsers
11. funkysmell

    Thanks, I needed the
12. funkysmell

    I needed the <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
13. Jessec

    You don’t need to be an expert to create something beautiful check this http://www.divvers.com.
    Btw in the process of creating this tool we visited your blog many times thank you mr Walsh.
14. CPKS

    I am responsible for much of the recent development of CurvyCorners. Hopefully it won’t be long now before it is out of date! The good news is that Firefox finally seems to be respecting the CSS3 standard and -moz-border-radius will fade into history.
15. Paul

    Thank you so very much for sharing this! Completely saved my arse. :)
16. Prayag

    I tried to use border-bottom-right-radius tag in IE9 but it didn’t work but if used border-radius tag then it worked.
    I have the meta tag and also

    I wanted to know is it even supportedin IE9?
17. Raihan.qa

    anyone know how to create box like that–> [img]http://i53.tinypic.com/2e3u883.jpg[/img]
18. ilanko

    curvy.corners.trunk doesn’t work directly on inputs.
19. Marilize

    IE keeps breaking the round corners – does the line but do not get rid of bg color
20. Buz

    This is funny, your site is rounded in probably every browser except IE. Why in the world would they make it this difficult!?
21. Mike Morales

    hi, i’m using the script its very very nice your work, but i need have the control of the height of the object, if my objet have a hieght 50px the script make the height of 100px, can you help me ! thanks !
22. Webbyrå Göteborg

    IE is a pain, thats all i have to say about that ;)
23. Chuckie Boomboom

    This website looks like sh** in IE8. Hard to take an article seriously when teh developer of the article (and thus this page) can not even program his own website to work.
24. Cynthia

    I’m wanting to create a subtheme for drupal … and I’m all new to this. Anyone want to tell me how I can “unround” the corners in my current theme without changing the css (which is what I understand I’m not to do). Thanks!
25. Joe

    I learned through the frustration that certain elements will break your rounded corners.

    Be weary of using CSS gradients with rounded corners. Internet Explorer does not round the corners if you use a CSS gradient. Instead, use a method like this or come up with a better method folks. Basically, all I did to get rounded corners to display in IE was set the background color to a flat hex. Other browsers read their gradient syntax as long as you declare it important.

    background: #083291; /* Flat or IE - without it rounded corners do not work*/
    background: -moz-linear-gradient(center top , #134ac5 0%, #083291 100%) repeat scroll 0 0 transparent!important;
    background: -webkit-gradient(linear, left top, left bottom, from(#134ac5), to(#083291))!important;
    

    Cheers
• Jeremy

  This happened to me as well, thanks for pointing it out.
26. surya

    Hai i am using the curvy cornes for my site there was a point in IE where a ajx call takes place and there after all my curvy corners are lost. we rectified this problem with the jsf.add.on event.By this we are able to get the curvy corners after a jax call but the css color of the tabs are left the same.And there was a point where the transactions page is coming all the way down out of the width allocated.I t works fine if i remove the curvy corners is there any solution for it.I know it sounds weird but i have gone throgh many sites where i coudnt find a solution to fix my problem.I am using { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
    This works perfect in Mozilla but in combination with curvy corners in IE its becoming a mess.Any help would be appreciated
27. Steph

    THANK YOU for this article. This saved me a lot of work.
28. roundcorner

    -moz prefix no longer working on FireFox 13 .
• Tommy Fenyx

  Someone have a solution??
• Juan

  And now? What to do with all the websites with roundcorner?
• Mariana

  I tried just border-radius, without the -moz-, and it worked!
29. Ankit SIngh

    can we use rounded corners in internet explorer without any java script
30. Jeremy

    In regards to the bug affecting CurvyCorners and IE9, I came up with a solution that makes that bug go away. You can read about it on my site: http://www.jeremyrperry.com/blog/bug_using_curvycorners_ie_9_and_its_fix
31. foo

    i put the meta tag in the header and it’s worked thank you……
32. foo

    the meta tag worked for me thank you…….
33. andré

    CurvyCorners don’t support inline elements like input…
34. james

    Hi, I have tried everything but round conner is not working in IE

     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
    

    it’s working fine in firefox

    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    

    after this nothing change in IE
35. CLem

    Does not work in IE9. Box-Shadow does not work either.
36. Dharmendra

    I have tried lot’s of thing but border-radius and background-size is not working in IE8 please let me khow, what can I for css compatibility in IE 8.

    I hope for immediate response!
37. raj

    very useful website. working fine in my all broswer Thanks admin
38. kaushik

    awesome border redius…..
39. sigmato

    Is there any turn around method other than curvy cornors without using JS.
40. Mohammad Rehan

    hi! What is solution of Border Radius properly work on IE browsers..??
41. Wolfgang

    Aaaah. You saved my day… I struggeled around with IE 10 and rounded corners…
    Simply putting “” into the header was the solution!

    Thank you. :-)
42. Wolfgang

    forgot the PRE.. :-/
43. Steve

    There’s a typo in this line:

    “CurvyCorners uses a series of JavaScript-generated DIVs to draw rounded corners, event supporting anti-aliasing.”

    should be:

    “CurvyCorners uses a series of JavaScript-generated DIVs to draw rounded corners, even supporting anti-aliasing.”

    e.g. “even” vs. “event”
44. Joanna Robison

    Hey,
    This is really useful bunch of work also u can refer http://www.nerdcorelabs.com/ to get a better idea on this.

    Cheers…
45. Hitesh

    its not supported in IE 8.
46. James

    It is not working with internet explorer 8.
47. Web Otiz

    Thanks a lot for sharing this but it’s not working in Internet Explorer 8