CSS Rounded Corners ‘Roundup’

Christian Watson CSS, Web Design

This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it’s hard to know which one to choose.

To that end I’ve provided some more information about each method in order to help people choose which best fits their needs.

Some of these techniques use CSS and one or more background images, some use CSS, JavaScript and no images, and a couple use only CSS; no images or JavaScript required (more markup is needed though).

Not Sure Which One to Use?

There are so many different techniques now, it really depends on your individual requirements and preferences; particularly whether you want to use a JavaScript-based technique or not.

Try out a few methods and see if there’s one that fits. For convenience I’ve split the methods into two tables:

  1. CSS only methods
  2. JavaScript required methods

CSS Only Methods

Name# of ImagesFixed / LiquidSite / Comments
Simple CSS3 rounded corners with support for IE0LiquidUses CSS3 and uses images for IE
Karate Corners1LiquidKyle Schaeffer
Even More Rounded Corners With CSS1LiquidSchillmania.com
CSS Round Corners0Fixed / LiquidGran Yosler. Limited flexibility.
Single Image Fluid/Fixed Rounded Bordered Corners walkthrough1Fixed / LiquidCASS-Hacks
ORB | Fluid CSS One Image Round Borders1LiquidDaniel Tillett
Curved boxes in CSS2FixedIncludes CSS3 example
Chunky Borders and corners with no images0Fixed / LiquidUses no images
CSS Liquid Round Corners6Fixed / LiquidSearch-This
RoundedCornr4Fixed / LiquidOnline generator
More Rounded Corners with CSS6LiquidSchillmania
Mountaintop Corners2FixedA List Apart. Uses definition list
Custom Corners & Borders: Part I5LiquidA List Apart. For solid backgrounds
Custom Corners & Borders: Part II5LiquidA List Apart. For gradient backgrounds
Spiffy Box1FixedSpiffyBox. Online generator based on Thrash Box
Single Image Rounded Corners1Fixed / LiquidPhoenity
Custom Corners3FixedInterface-7
Bullet Proof Rounded Corners4LiquidAlbin.Net. Images added via HTML not CSS
CSS teaser box1Fixed456 Berea Street
CSS teaser box revisited2Liquid456 Berea Street
News list1 or 2Fixed456 Berea Street
CSS Rounded Box Generator5FixedNeurotic Web. Online generator
Round Corners3 or 6Fixed or LiquidSova v siti. Liquid box uses 8 divs
Simple Box8Fixed / LiquidSperling Corporation
Custom Bordered Boxes1 or 2Fixed / LiquidSteve Clay. Includes Fireworks source file
Borders with curves5FixedWebcredible
Boxes with curves4FixedWebcredible
Resizable box with freely stylable corners & surface4LiquidAndreas Kalt
Broader Border Corners4Liquid24 Ways
CSS: Smart Corners4LiquidMike Cherim
Snazzy Borders0Fixed / LiquidCSS Play
Spiffy Corners0Fixed / LiquidSpiffy Corners. Online generator

Methods Requiring JavaScript

Name# of ImagesFixed / LiquidSite / Comments
jQuery Rounded Corners0LiquidRequires jQuery. Can style buttons and links.
Corner.js0FixedMultiple effects including borders.
Anti-aliased Rounded corners with JQuery0Fixed / LiquidBlue anvil.JQuery version of Curvy Corners.
ShadedBorder0Fixed / LiquidDrop shadows & other effects.
Transcorners0FixedMooforum.net
Transparent Custom Corners and Borders2Fixed456 Berea Street
Customising custom corners and borders2Liquid456 Berea Street
Nifty Corners Cube0Fixed / LiquidHTML.it.
13 examples
MochiKit Rounded Corners0LiquidMochikit
Anti-aliased Nifty Corners0LiquidSteven Wittens

If I’ve missed any techniques or got any of my facts wrong, please let me know.

67 thoughts to “CSS Rounded Corners ‘Roundup’”

  1. That’s quite a list, Christian. Very useful. I attempted this CSS rounded corners thing quite awhile back and ended up sticking to a perfect 90 degree corner. But, with your list, I’m sure I’ll find a method that will convert me to a CSS rounded corner addict ;o).

  3. Hi Christian,
    In addition: I didn’t know the existance of this list, otherwise I wouldn’t have spent so much time in developing my own model, I guess!
    Tired of Googlin’ and not finding a solution for my needs (“universal scriptless transparent liquid 1 image solution”), I decided to do it myself and to combine some css-techniques.
    Result was the article/tutorial “Liquid Round Corners”, together with a “Liquid Corners Playgarden” for a handfull of examples.
    francky
    Note: After I finished the job, I discovered the Bereastreet pages: a model with pretty much ressemblance. – We should empty Google, and save only the good pages… 😉

  8. Hi,
    I have this page bookmarked. Great resource!
    May want to look at the “new & improved” Nify Corners.
    “There are several improvements and new features introduced in Nifty Corners Cube which make it more versatile and simpler to use than the previous versions …”
    http://pro.html.it/niftycube/

  9. I have a picture and I want to get this picture with rounded corners by using css? How to realize that?

  10. *jam* – that’s an interesting question. I imagine that you would need to use one of the Javascript-based techniques, such as Nifty Corners.
    If you set your image as the background image for the div to be rounded, as well as declaring the background color, you should get the effect you’re looking for. E.g.:
    div#rounded {background: #ffffcc url(image.jpg) top left no-repeat;}
    I don’t recall seeing an example before, so let me know if it actually works!

  18. Hi, I am trying css. I have used nifty cube and I already have check some basic tutorials, but I have some problems and dont have much idea:
    How can I add Java script into a div (wich is rounded with ninfty cube) like a scroll, without affect the design? – when I do this, the design is lost, I mean, the border and the round corners.
    Other: I have problems with div border. When I add a a or hx tag, the div border is broken, a border part is no more continuos at a or hx level?
    Some suggestion? may be a reading o tutorial
    Thnks!

  21. nice comprehensive list, but this makes it even harder for me to choose! Some comments on portability, effect on validation/accessibility and degradation across different browsers (including text-only or screen readers) would be useful. Also how applicable the styles are to print layout … it seems rounded corners are one of those areas designers are prepared/have to break the web, and this shouldn’t be neccessary. Also, what’s the advantage of using a single image? Especially in the presence of extra complicated and unportable Javascript/CSS code to make the corners look right it seems to me a flawed tradeoff.

  24. actually, airtight corner is fluid, and shouldn’t break on text resize. also, it only requires one image for all corners.

  25. *Inviz* – added!
    *anon* – choosing the right technique is definitely the challenge now. Your suggestions are good ones; however, it’s unlikely that I’ll ever find time to implement them — sorry.
    *Johan* – added!
    *evan* – thanks for the corrections. However, in the example, when I resize my text in Firefox I see an extra part of the image below the bottom right corner of the rounded box. That’s why I said that it breaks.

  27. Thank you for this list. This was very helpful to me.
    I personally can recommend the last three links. In my opinion they are outstanding.
    I don’t like the approaches with images and/or javascript. Using only CSS and HTML is the a very good way.

  28. In the list, “Customising custom corners and borders” from 456 Berea Street is shown to not use Javascript, however it does use script to modify the DOM.

  29. While really being thankful for this list (a novice in this and almost only knew about nifty) – I don’t want to sound like complaining – cause I am not – but if you ever update this list – an extra column for dependencies (for example prototype, none etc) would be pretty useful.

  31. Rounded Corners With CSS and JavaScript does actualy use 4 images. Right?
    4 divs and background images.

  32. A great list, particularly your willingness to go to the trouble of trying to sort out which would be most useful for a given situation, not to mention the fact that you’ve created a pop-up that tells how many clicks each has received today, which gives me an idea of which seem to be most useful to other people. What strikes me, though, is how many different options there are out there. Every time I think that I’ve got to a level of basic understanding with web page design, think I am beginning to feel some mastery, I come across something like this that reminds me just how much is out there that I still don’t know about. It can feel quite discouraging sometimes, despite the fact that what it ultimately demonstrates is that there is so much freedom to be had in the age of the internet.

  33. *linen* — I feel like that a lot too, so don’t be disheartened! A couple of years back I wrote a post about “having faith in yourself as a web designer”:https://smileycat.com/miaow/archives/000096.php which still rings true today.
    If you can master the basics of SEO-friendly, accessible, semantic, CSS-driven web page design you will be better than 70+% of people working in this industry, many of whom have been working in it for years!

  34. Another method, single image fulling floating or fixed and supports any kind of container positioning, e.g. float, absolute, relative, static.
    One can also keep one’s transmitted markup clean by using Javascript on the client side to add the elements needed to the DOM.
    A demo (w/o Javascript) page is at
    http://cass-hacks.com/articles/example/css_borders_corners/
    A demo (with Javascript) page is at
    http://cass-hacks.com/articles/example/css_borders_corners/javascript/
    A walk-through as to how it works is at http://cass-hacks.com/articles/code/css_borders_corners/
    Hope people find it useful.

  35. Thanks for sharing this list Christian. I’m teaching kids young adults CSS and your list has become my test/exercise/activity list for them.
    By the way, do you have any idea as to how to make a collapsible table through CSS?

  37. In the list, “Customising custom corners and borders” from 456 Berea Street is shown to not use Javascript, however it does use script to modify the DOM.

  39. Thank you for this list. This was very helpful to me.I personally can recommend the last three links. In my opinion they are outstanding.

  40. Thanks for this great info! I loved the Spiffy Corners Online generator. Very usefull, a great tool! No images or javascript needed…
    Thanks, once again!

  41. DOM elements. Was there a reason specifically or some obvious constraint I’m missing? Also, any idea on what document.matchAll() will return in the next generation of browsers? Thanks for the library, we need more devs with your approach.

  43. I noticed the list didn’t mention Steven Wittens’ take on Nifty corners, he’s sprinkled anti-aliasing into the mix:

  49. Note: After I finished the job, I discovered the Bereastreet pages: a model with pretty much ressemblance. – We should empty Google, and save only the good pages.

  50. I’ve gone through all of the liquid border methods on this page but none of them seem to do what i want it too. (unless i missed something when i was looking through them.
    What i need is is to have content right up against the curved border. e.g. an image in the top right corner of a rounded box would have some of the image corner hidden by the border.
    the closest thing I’ve seen to this is using “Curvey corners”:http://www.curvycorners.net/examples/demos/demo2.html but it’s using a background image.
    Padding/positioning is also a problem in a lot of methods.
    i want a double border consisting of 2 DIVs, the first (outer) has 1px padding.
    the method by “Kae Verens”:http://verens.com/archives/2005/11/24/curved-borders-with-valid-css-and-unobtrusive-javascript/ is the closest i have to getting this to work.
    I’ll check back on this page in the future to see if any updates could solve these issues.

  51. Thank you!! i been looking for a way to add rounded borders without using images.
    One thing i can’t work out is how to add borders around text but the title stops the border at the start of the title to the end of it.

  54. yeah love this list of round corner unfortunately i found it a day too late and have developed my own doh! but one thing i did think about (if/when you have time) is to add a rating so peeps can rate each box type i saw it working very well on a site http://www.cocktailbuilder.com/ hes using nifty too 😉

  58. I used Smart Corners in my web cd druck. I must sey Thanks for sharing because I was searching for this last few days. There is a problem with positioning like someone said before. Everyone have own method for this but we are wainting for new solutions.
    Thanks
    Anna Ruck

  59. DomCorners only uses one image. The layouts presented in that technique use multiple images because each sample box is a different color.

  62. I have just developed NiftyDotNet, an ASP.NET wrapper for the excellent library Nifty Corners Cube. It is a component that encapsulates all the files and logic needed, so developers can use it just dragging and dropping on their webforms.
    Due it is based on Nifty Corners, everything you’ve said here is valid.
    It is distributed as open source, and you can find it in http://code.google.com/p/niftydotnet.

  63. Thank you very much for the list. I have been looking for how to create the rounded corners in my web application, I’m so glad to have it done finally by your list.

  64. Wow. I was looking for css corners .. but this list is so huge i have to take two days off work to go through all of them. Thanks a lot!

  65. Hi,
    First of all, thanks for the great collection of rounded corners.
    I had a look at the chunky Borders ,and they look interesting but I didn’t find nothing on that website relating to the method to obtain the boxes.Maybe do we have to pay for it?
    If I didn’t see the link and somebody knows where to look,please tell me.
    Cheers
    joe

  66. I have just developed NiftyDotNet, an ASP.NET wrapper for the excellent library Nifty Corners Cube. It is a component that encapsulates all the files and logic needed, so developers can use it just dragging and dropping on their webforms.

  67. Hmm,
    It might be good to put forward the very basics about rounded borders:
    — There is no “good” way to do them.
    The rounding of borders should simply be option in CSS but it isn’t. Instead all these effects involve simulating rounding with images or little divs. You either have to use an image and transparency effects (messy) or you have to use a lot of divs, generated either by your server or by javascript. One or another of these methods may suit someone’s style but none involve programming elegance, none of these are really in the spirit of CSS (easily change the look of your site by just a single entry in your CSS).
    Thought it should be said for those who are just starting with this stuff.
    J

Comments are closed.