CSS Rounded Corners ‘Roundup’

A collection of techniques for creating boxes and layouts with rounded corners using CSS, and sometimes JavaScript.

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 Images Fixed / Liquid Site / Comments
Simple CSS3 rounded corners with support for IE 0 Liquid Uses CSS3 and uses images for IE
Karate Corners 1 Liquid Kyle Schaeffer
Even More Rounded Corners With CSS 1 Liquid HedgerWow
Even More Rounded Corners With CSS 1 Liquid Schillmania.com
CSS Mojo: Adding Visual Polish To Your Pages 1 Liquid Leslie Sommer
CSS Round Corners 0 Fixed / Liquid Gran Yosler. Limited flexibility.
Single Image Fluid/Fixed Rounded Bordered Corners walkthrough 1 Fixed / Liquid CASS-Hacks
ORB | Fluid CSS One Image Round Borders 1 Liquid Daniel Tillett
Rounded Corners for Fixed width 2 Fixed Daniel Bulli
Curved boxes in CSS 2 Fixed Includes CSS3 example
Chunky Borders and corners with no images 0 Fixed / Liquid Uses no images
Lean and Clean CSS boxes 2 Fixed TJKDesign
PNG transparency rounded corners using images 7 Liquid Uses PNG images
CSS Liquid Round Corners 6 Fixed / Liquid Search-This
RoundedCornr 4 Fixed / Liquid Online generator
More Rounded Corners with CSS 6 Liquid Schillmania
Spanky Corners 4 Liquid SitePoint. Online generator
Mountaintop Corners 2 Fixed A List Apart. Uses definition list
Custom Corners & Borders: Part I 5 Liquid A List Apart. For solid backgrounds
Custom Corners & Borders: Part II 5 Liquid A List Apart. For gradient backgrounds
Spiffy Box 1 Fixed SpiffyBox. Online generator based on Thrash Box
Graphik Junkie 3 Fixed Graphik Junkie
Single Image Rounded Corners 1 Fixed / Liquid Phoenity
Custom Corners 3 Fixed Interface-7
Bullet Proof Rounded Corners 4 Liquid Albin.Net. Images added via HTML not CSS
Rounded Corners in CSS 4 Fixed Adam Kalsey
CSS teaser box 1 Fixed 456 Berea Street
CSS teaser box revisited 2 Liquid 456 Berea Street
News list 1 or 2 Fixed 456 Berea Street
CSS Rounded Box Generator 5 Fixed Neurotic Web. Online generator
Round Corners 3 or 6 Fixed or Liquid Sova v siti. Liquid box uses 8 divs
Simple Box 8 Fixed / Liquid Sperling Corporation
Custom Bordered Boxes 1 or 2 Fixed / Liquid Steve Clay. Includes Fireworks source file
Borders with curves 5 Fixed Webcredible
Boxes with curves 4 Fixed Webcredible
Resizable box with freely stylable corners & surface 4 Liquid Andreas Kalt
Rounded corners in CSS 4 Liquid Arve Bersvendsen. Does not work in IE
Broader Border Corners 4 Liquid 24 Ways
Liquid round corners 4 Liquid Tiscali
CSS: Smart Corners 4 Liquid Mike Cherim
Add Fluid Borders to Your Boxes with CSS 0 Fixed WebReference
Snazzy Borders 0 Fixed / Liquid CSS Play
Spiffy Corners 0 Fixed / Liquid Spiffy Corners. Online generator

Methods Requiring JavaScript

Name # of Images Fixed / Liquid Site / Comments
jQuery Rounded Corners 0 Liquid Requires jQuery. Can style buttons and links.
Corner.js 0 Fixed Multiple effects including borders.
Anti-aliased Rounded corners with JQuery 0 Fixed / Liquid Blue anvil.JQuery version of Curvy Corners.
ShadedBorder 0 Fixed / Liquid Drop shadows & other effects.
Transcorners 0 Fixed Mooforum.net
Sweet Rounded Corners 1 Liquid Allcrunchy.com.
Online generator
Transparent Custom Corners and Borders 2 Fixed 456 Berea Street
Customising custom corners and borders 2 Liquid 456 Berea Street
curvyCorners 0 Fixed / Liquid Curvy Corners.
Support forum; mailing list
Nifty Corners Cube 0 Fixed / Liquid HTML.it.
13 examples
Rico – Javascript Rounded Corners 0 Fixed Rico
Rounded Corners With CSS and JavaScript 0 Fixed Dev Articles
Rounded Corners with CSS and JavaScript 4 Fixed SitePoint
MochiKit Rounded Corners 0 Liquid Mochikit
Octopus Engine 8 Liquid Dragon Labs.
Source package includes PSDs
Anti-aliased Nifty Corners 0 Liquid Steven Wittens

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

67 thoughts on “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).

  2. 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… 😉

  3. 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/

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

  5. *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!

  6. 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!

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

  8. *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.

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

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

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

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

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

  14. *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”:http://www.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!

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

  16. 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?

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

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

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

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

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

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

  23. 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 😉

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

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

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

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

  28. 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!

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

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

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