O'Reilly

CSS Rounded Corners

By on  

The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.  CSS rounded corners thus save us time in creating images and requests to the server.  Today, rounded corners with CSS are supported by all of the major browsers:  Safari, Chrome, Internet Explorer, Opera, and Firefox.  Let's look at border-radius syntax, caveats, and Internet Explorer support.

Syntax and Standards

The CSS3 standard property for applying rounded corners is border-radius.  This property is added to elements just as naturally as width or positional properties are:

.roundElement	{
	border-radius: 10px;
}

The preceding statement assigns one rounded corner value to each of the element's four corners.  A specific border radius may also be added to each to elements individually:

.pearElement	{
	border-top-left-radius: 7px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 8px;
}

A shorthand border-radius syntax is also available where application:

.oddRoundElement {
	border-radius: 12px 5px 12px 5px;
	/* or */
	border-radius: 12px 5px;
}
	

The pattern details top-left, top-right, bottom-right, bottom-left.

Browser Support and Prefixes

Since rounded corner elements and border-radius were not a set standard, each browser implemented their own prefixed {prefix}-border-radius implementation.  Those prefixes look like:

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

/* firefox's individual border radius properties */
-moz-border-radius-topleft:15px; /* top left corner */
-moz-border-radius-topright:50px; /* top right corner */
-moz-border-radius-bottomleft:15px; /* bottom left corner */
-moz-border-radius-bottomright:50px; /* bottom right corner */
-moz-border-radius:10px 15px 15px 10px;  /* shorthand topleft topright bottomright bottomleft */

/* webkit's individual border radius properties */
-webkit-border-top-left-radius:15px; /* top left corner */
-webkit-border-top-right-radius:50px; /* top right corner */
-webkit-border-bottom-left-radius:15px; /* bottom left corner */
-webkit-border-bottom-right-radius:50px; /* bottom right corner */

Essentially you would need to make a separate declaration for each browser.  Adding the same rule for different browsers is annoying so adoption of the standard border-radius is important.

Internet Explorer Support

Internet Explorer did not support border-radius until IE9, much to the frustration of developer and designers. With IE9, the important steps are using the edge META tag and provide the border radius:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

While many solutions have been presented, I've found the best to be a small JavaScript-powered solution called CurvyCorners.  CurvyCorners uses a series of JavaScript-generated DIVs to draw rounded corners, event supporting anti-aliasing.

Using CurvyCorners is quite simple.  The first step is adding the CurvyCorners.js file to the page:

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js"></script>

CurvyCorners detects the presence of border-radius on DOM elements and works its magic to duplicate the effect in IE. There are no images involved. You may also identify specific elements to apply rounded corners to:

var settings = {
	tl: { radius: 12 },
	tr: { radius: 12 },
	bl: { radius: 12 },
	br: { radius: 12 },
	antiAlias: true
};
/* moooo */
$$('.round').each(function(rd) {
  curvyCorners(settings,rd);
});

I highly recommend specifying elements to add rounded corners to, as checking the entire page is a taxing process;  remember that the rounding occurs on every single page load.

Rounded corners may be achieved with CSS' border-radius property in Internet Explorer, Firefox, Safari, Chrome, and Opera.  This small feature opens a new realm of possibilities in bridging design and code.  Now that browser support is abundant and browsers are beginning to use a standard border-radius property name, there are really no drawbacks to relying on CSS for your rounded corners.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • Fix Anchor URLs Using MooTools 1.2

    The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to...

  • Degradable SELECT onChange

    Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function...

Discussion

  1. 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. 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. 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.

  10. 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. Thanks, I needed the

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

  13. 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. 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. 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. 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. 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. 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 .

    • 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. can we use rounded corners in internet explorer without any java script

  30. 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. i put the meta tag in the header and it’s worked thank you……

  32. the meta tag worked for me thank you…….

  33. andré

    CurvyCorners don’t support inline elements like input…

  34. 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. 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. Is there any turn around method other than curvy cornors without using JS.

  40. 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. 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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...