Comments

Great write-up... thanks! To make it even more flexible, your corner images can be made so that the orange foreground is transparent and the white area can be kept white. Most of the time, I find myself always keeping the background of my sites white while changing the colors of the foreground elements. That technique will allow you to change the color of the tab corners via css without having to change the images.

Probably nothing new here, but CSS-3 offers the 'border-radius' property which seeks to alleviate the need for hacks. Now if only we could actually start using it before 2010 or so. http://www.mezzoblue.com/cgi-bin/mt/mezzo/archives/000182.asp#roundedcorners

I've been reading a bit about this topic lately, and yours is one of the more straightforward methods. Thanks for sharing it! :) Since I've got skins on my blog, I made myself one with rounded corners using the -moz-border-radius, and so if someone's browser doesn't support it, they have other choices, and *I* can enjoy the nice rounded boxes ;) (IE6 just shows the boxes without rounding, which still looks okay, IMO) You can see it by going here, if you'd like! http://kadyellebee.com/index.php?newskin=19

Okay, first and foremost, this thing doesn't even try to remember me. In your cookie javascript, in lines like " setCookie(whatever, whatever, now, '', HOST, '');" make it " setCookie(whatever, whatever, now, '/', HOST, '');" so that it sets the cookie on the root, ie kalsey.com. Same thing with deleteCookie. Done with that. One thing I like about the other approach is that even though the rounded corner may be 15px tall, text can still slip up 'between' the corners (With the method featured in the entry, everything must start below the roundtop div, and it's being pushed down 15px. Now I don't know about you, but I would've liked 10 of those pixels in height.), and that looks more dynamic to me. I'll experiment with a variant of this method to make the same effect. I'm a bit torn about -moz-border-radius, because it's providing something for Mozilla only, and it's a non-standards property. So if you use it, your CSS will never validate (correct me if I'm wrong) and while I know that it's a fast quick way to make it look good, I wouldn't do that.

Awesome. Thanks for the article.

As for the issue on transparents GIFs and halos and such, wouldn't using an alpha channel transparent PNG work? Does IE support this yet?

Looks great in Safari 1.0 as well. Thanks for the tutorial!

Top article. I'm pretty new to CSS, having been doing web dev for a while and being strictly table oriented. I'm really beginning to see the light though and will be doing most of my stuff in CSS from now on, tutorials like this are excellent. PS. Works great in Firebird, but you knew that already :-)

Excellent tutorial. Short, simple, and does the job perfectly. Thanks!

Why are people so enamored about rounded corners? Isn't the point of CSS to stop the hacks we had to do with tables?

Very nice. Works in Safari 1.0, too.

Nice. Now do it with a variable width! Would it still work with .roundcont { width: 100%; ?

Works v. nicely in IE5.5./win, IE5.0/win. In IE4.0/win, it *mostly* works, except there's a color bar the width of the full graphic at the bottom. Screenshots available upon request. To the person above who asked, "Why are people so enamored about rounded corners?" Answer: Clients. "Oooo, shiny!" If you can make shiny simple, do it!

I use a similar technique on my site at http://weblog.stanton-finley.org/ . It uses the rounded corner method described at http://www.albin.net/CSS/RoundedCorners/ . I should add your "style="display: none" to my code at some point to hide the corners from non-compliant browsers. Excellent suggestion! The technique I use works fairly well across all modern browsers, but a mozilla bug ( http://bugzilla.mozilla.org/show_bug.cgi?id=209135 ) can occasionally mis-render the bottom border of a box by one pixel.

from one Adam to another... Getting IE to do the alpha channel "correctly" doesn't have to be painful. WebFX has, for a while, make an IE behavior available that does all the thinking for you (as long as you aren't trying to use alpha transparency for background images). http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html Its a behavior so you won't validate but you can simply create a stand alone .css that only has the img { behavior: url("pngbehavior.htc"); } and those who don't care about behaviours will ignore it. And only one file won't validate.

Adam: The con with this is not that it is a hack. Couldn't care less. The con is that it will not work with background images.

As usual, Netscape destroys everything. Hate them.

Hi Adam This is definitely the best technique I have come across using graphics for corners - though I found it can be quite hard to get a completely smooth corner using gifs if your inner box is white against a coloured background - creating a larger box in the first place to cut the corners from seems to improve this. One extra thing that might be worth considering would be to set the pixel height in the html to 1 x 1 for those using browsers that don't even support inline styles (eg NN3) and then just let the CSS define the 15 x15.

Probably a silly question given the trouble height can be... but say we want a 400px high box that is a fluid width? I can't get the bottom div corners to behave. Anyone else? It can be done in a messier way but then I might as well use a table.

Right -- sorry there for lack of clarity. Specifically I want to have the height of a box always be 90% or so... effectively filling the page no matter the viewport. Now I know this is trouble with any div and even the tricks of setting html, body {height:100%} don't guarantee results. Effectively this is akin to having a fluid height with a foot that sticks at the bottom of this fluid height. ------------------------ fluid height div ++++footer pinned at bottom++++ ------------------------- I have seen one truly successful implementation and it involved js which I abhor as a production solution. btw: thanks for your community contributions via this weblog.

Great article thanks. I've been trying to adapt this for a three column layout where the only center column is liquid width, using margin-left and margin-right to get the right width. Looks great in Mozilla but doesn't position the left rounded corners in the center div correctly in IE6 (there's about 3px of the background color to the left of the corners showing). Seems like the only way to fix that would be to add a width: specification (auto doesn't work), but then I run into the problem that width:100% is interpreted differently in IE6/Mozilla. Any suggestions/advice? (Code currently sitting here: http://www.cre8d-design.com/redview/) Thanks! Rachel

Sorry, the URL came out wrongly, http://www.cre8d-design.com/redview/

I recently created a bordering function using images. check www.dubheart.com (still border) or www.maxfire.net, where I've used animated flames to border divisions.

Hey guys, can someone offer me some advice here, check this link for me: http://www.cbot.com/test/ I'm trying to get the word Membership pushed to the top center between the left and right corners. Ignore the colors, it's just so I can see what's going on. Any ideas or tips? Thanks, Chris cjoh44@yahoo.com

I have tried ever css style to create rounded corners yours is the first too work! Well done :)

Concerning the background-color issue, and aliased corner images: you can simply create your box with anti-aliased corners, thusly making your image only 2 colors, then making the transparent .gif with only the white showing. This way, no matter what your background color, the corners always work. Unless you are really bent on "smooth" rounded corners, this technique works great. And anti-aliased, pixelized corners don't look bad at all. Nice article. :)

Yes Adam, nice article Maybe as a challenge I would like the corners somewhat fancier. This is quite simple with a 9-cell table in a #-format. Could it be done with DIVs as well? See http://www.xs4all.nl/~quadsk8l/Articles/AnElasticPlasticButtonjus.html for what I mean

thnx for the tutorial..

Hi thanks for the tut. :) I've floated an image inside the box which works without a problem. With the text protion however, in tables I usually put this in a separate column which can then be formatted within the td. Can you use CSS to format the text separately from the image? (want to adjust the padding of the text from the top of the div). Just wondering if this can be done. Thanks.

I'm trying to create a table using CSS whereby the table has a stroke of "1" using #000000 and only the top of the table has the orange and the bottom part of the table has the orange, but everything in between is white (with the black stroke). Basically what I want is the color only to show on the top and bottom sections, but still using rounded corners all the way around. I'm pretty much out of luck aren't I? Kevin

This is simple and elegant, but only works with solid backgrounds. Have you explored any solutions for varying border-widths for an outlined box? Stan Finley's solution (posted above) is one of the better methods but I have trouble getting it to work with nested divs, which break the border display in IE PC

Thanks for the tutorial. Unfortunately, making images for the corners forces you to make images of different colors depending on box color and the color of the background. Well, there's another way. Check out my code and notice that I have NO images to do these bordered, rounded, smooth(antialiased) corners. Since I haven't seen this code anywhere else on the web yet I expect that most of you will be very surprised. If you use this code, please credit me. Thanks! Shane Clements

I've found that if the outer div needs a border, then the image divs and the images need a margin of -1px for the position that they are in. so: div#top { margin: -1px -1px 0 0; } div#bottom { margin: 0 -1px -1px 0; } img.corner { margin: 0 0 0 -1px; } It works most of the time. IE 6 tends not to work with this sometimes. I just got fed up and did a *HTML DIV#bottom {display: none;}

I loved your article it was one of the best on the matter. It was the only one that i did not have to use a table with a fixed width, which was very useful as i could keep my current layout. However i have a favor to ask, could anyone make those images that same however 25x25pixels and colored rgb(000,128,255). Thanks.

This worked easily enough but seems to have a bug. I used this code to wrap around an existing 100% width table that has many tables in it with graphics/text. When I adjust the window size to manually test from the browser a bug occurs when the scroll bars come into affect (when the graphics cannot be adjusted freely anymore). This is where the right corner continues to float in (when it shouldn't) because there is no spacer image to force it to stay put. This is not a problem if I use the traditional method of hard coding the corner images into a table row. Am I missing something? I would love to use this.

Well done, I'm a beginner at this CSS stuff but at last an explanation on rounded corners that even I can follow. Thanks mate

Excerpt:

i had to add text-align: left; to both the "roundtop" and "roundbottom" classes to get this to work properly in IE 6. otherwise, it works great. thank you for sharing your code and your insights.

Hi Adam.. Guys! A question I am stumped by but a little similar to what is happening here. Any idea's on how I could create a placeholder/frame with rounded corners that each of my thumbnail images (about 200 per page) lay inside to; a: Align and center these images as they vary in side b: give them a nice finished look I am rapidly approaching give up point! Thanks

You cut the image into four and yet you only used only 2 (top left and bottom left) why????

Very nice, Adam. Problem for me was that on IE6, I was getting an extra few pixels below the .roundbottom div. Didn't matter what I played with, it wouldn't go away! So, with a bit of luck (in Australia, we say "I arsed it!"), I tried the following. Tested it in these: IE6: OK Safari 1.2: OK Opera: OK Firefox 1.0: OK Netscape 7.1: who cares! (no, seriously, it's OK) I just played about with the vertical align and made an extra class for the upper and lower right-hand gifs. As I am a newbie, I don't know if this is legit, but what the heck: it seems to work! (css) .roundcont { width: 250px; background-color: #f90; color: #fff; } .roundcont p { margin: 5px 10px; } .roundtop { background: url(r1_c3.gif) no-repeat top right; text-align: left; } .roundbottom { background: url(r3_c3.gif) no-repeat bottom right; } /* This is for the top right image */ img.corner1 { width: 11px; height: 11px; border: none; display: block !important; vertical-align: top; } /* This is for the bottom right image */ img.corner2 { width: 11px; height: 11px; border: none; display: block !important; vertical-align: bottom; } Cheers! Andy

This is working well on my site for css buttons... If only I could work out how to create a hover effect, something like; .roundcont a:hover { background-color: #bbffff; } This just makes the text change background colour, not the whole square. I know the corners won't change colour but thats ok, for the buttons i've created this won't be noticable as the corners are only 1px square and are the same colour as the background. If anyone can work out how to do this please pass on the good cheer! thanks

Why is it that if i use in the top of my html document, the two background doesn't appear?? Kristian

I cannot get this to work when the style sheet is external. I am I doing something wrong or does this only work when the style in inline?

Cool info. But I can see that the article is from July 23, 2003 so maybe other things can be done today? I know of the stuff in Mozilla like: -moz-border-radius: 0.5em; Anyone know if internet explorer has something similar? Thanks Claus

my whole "roundcont" is displayed with one color, I cannot differentiate between color of corners and background color. What am I doing wrong? I figured it out: my images had transparent background, and color was coming through. Is there a way to do the same thing, but with the images with transparent background? Thank you

how can i set it so that only one side of corners show?

What's the point of doing this with CSS if you have to include a lot of stuff in the html-file directly? What I like with CSS is having interchangeable styles for the same markup.

I believe that rounded corners adds pizazz to a web site. It is different than standard tables. Is the rounded corners done in a graphic editor then created with css? Meaning, the rounded corners must be created first prior to placing the css code?

Nice article using CSS to do this. I ran across a program called EZRound ( www.ezround.com ) that makes the graphics, slices them and writes the code for them. It is still all HTML, but I wrote them and they are looking at doing a CSS version too. The program is slick though - creates the rounded corners, drop shadows and all that. Just figured to pass the link along for those "graphically challenged" like myself ;-) Carl

Not bad, easy to implement, and looks good and works in the browsers I code for. I noticed someone mentioned coding for NN3. . .why bother?

This is the Rube Goldberg way of creating round corners. Clever, but incredibly scenic. Wait I got it, OBG, Object Oriented Graphics. Please make nothing like this ever again.

Wow after reading all these comments I am inspired to post again. I hope these posts are not deleted. Ahem: I have been making rounded corners professionally, clearly, and with the versatility to do all the requests these people want. How? WITH HTML, use tables people!! We mastered this rounding corners thing years ago and it works FASTER and with more options. Want changeable widths, you got it, want text between the corners, YOU GOT IT. Why is this person going to the trouble of making this more complicated and harder to use?! You guys are de-evolving just to use the novelty of CSS which is great, but not for THIS. Someone went to a lot of trouble to create the table options such as border=0 to solve these problems a long time ago... there is no advantage to doing this in CSS. OMG, I am so upset right now.

You don't need the image to go in your html markup. In fact, personally, I don't even slice my image - I create a circle and use CSS positioning to get the right part of it to show in the right corner. See the example here: http://www.pactumbooks.com Makes it easy.

Nick Please do us all a favor and visit http://w3c.org for updated xhtml standards. Yes tables work for rounded corners but if the page doesn't load properly the page just looks "broken". Tables were meant for "tabbed delimited data" not paragraphs and pics. Get over it already

I´ ve read a bunch of articles which condemn the employment of tables in favour of CSS design; I will not defend the use of the archaic table design , I think mankind walks forward; however I´ve visited so many pages on which tables have been banned and found that they´re boxy , I look at them and feel like got back in time 10 years ago. I am still trying to learn how to handle CSS properly and have asked myself: it is possible to do with CSS the same I do with tables (usually tables created by macromedia Fireworks from sliced optmized images that load fast and neat )?

I love the "stick to tables" sentiment. Thank heavens these people don't run the computer world. Or we'll still all be staring at a nice green prompt on a black screen. Terminal sharing anyone? The whole point of using CSS is so you can do a million more things than you ever could with nested tables and still have full flexibility. I have about 200+ documents on my site in XML form. Can you picture me going to each and every document and changing tables? NO! With CSS anyone can change layouts every week if they so wished and still have the content appear usable for folks with special needs. e.g. Screen readers for the visually impared or PDA screens for people on-the-go. Not only that, the table world forced boring and "boxy". With CSS, it's can be just a preference, with half the code. Tables used far more elements than was needed. It cluttered the content with multiple attribute junk. Believe it or not, your HTML becomes shorter with CSS layouts. I can have id="summary" on a div and actually have the site summary in it! Very nice example BTW... I was looking around for something exactly like this. Thanks a bunch!

is there a way to incorporate this coding in an IPB forum? i want to have it so when people choose the 'quote' option, the box has the rounded corner effect. just curious.

I have adapted your idea on my site, but I have been told it does not display correctly on IE on the PC. http://centerstageproject.com Works fine in Safari, Firefox, Opera and IE on the Mac. Also validates at compliant XHTML. Any ideas? Neil

Ok... I am new to css so be kind... Can I use this css but instead of text for the content imbed a table... so the table has rounded frame? Or, is there a better way to give a table a rounded frame? Please help the newbie.

Perfect, i knew there was a simple way (the tables comment sums it up perfectly). But for anyone reading this who still holds a candle (even a very dimly lit candle) to layouts using tables, consider this... Like most CSS enthusiasts, I employ one very simple rule. HTML puts data on a page, CSS styles that data, which means I can never use anything other than CSS for layout and design. But some people complain that some things can't be done with CSS, or in some instances CSS is easier. I say this. There are some things that can't be done with HTML/CSS full stop. There are also things that can't be done with PHP, JavaScript, C+, Python etc etc etc. All we have are standards and best practices, always design with the limitation of the technology in mind.

Adam, thanks for the blog and for all the great work. Its sites like these that can save a guy a lot of time.

Came across this too. The html version has some complicated css, but the Js version has a cleaner look - as long as you aren't opposed to JS. Worth checking out though.

The style sheet codes are really very efficient and useful too. So many thanks to the site for such types of manuals. I need at present the stylesheet to create round shaped buttons within the or tag. So please if u help me by sending the stylesheet codes i'll be highly obliged then. Thanks Piyukh Ranjan Das. Software Developer India.

What is the point of adding extra HTML code to display rounded corners? I might as well use a table then..

I have made a similar example of this - except it's fluid horizontally and vertically, color swapable via CSS, and only uses one image :) Check out my article at: http://www.coonens.com/design/article/2/

I have made a similar example of this - except it's fluid horizontally and vertically, color swapable via CSS, and only uses one image :) Check out my article at: Fluid CSS One-Image Corners

I went to Neil Curry's site using IE6 and it worked fine. But not all of them. Some were all rounded the middle divs were displayed incorrectly. But the page was still impressive. Viva la CSS!

Does not work with Firefox 1.0.1 and Windows XP Professional SP2. At the bottom, the lines of the rounded corners and the bottomline do not meet :-(

anyone have a simple technique to convert this to an outlined box with rounded corners (rather than a solid-color box) ? Any way to do it using margins/padding/borders instead of a filler image on the top and bottom?

I used your tutorial to add rounded corners to my site. It worked perfectly. Thanks. The only problem now is that the container is no longer centered on the page. When I remove the code for the rounded corners the page centers again. Any hints on how to fix this?

-moz-border-radius should validate, as css allows extensions as long as they start with a '-'. However it'd be wise to add the css3 version for future standard support.

Thank you!

to confirm wolfie on Firefox 1.04 (winXP fully patched up to 27/08/05) the bottom does not align as it should

You can have any CSS box you want and it even works in Mac-IE: http://www.alistapart.com/articles/customcorners/

Hi, Your topics sound interesting but are very hard to read because the page layout is completely garbled for me. I'm using IE5.5 on 1024x768 but your page width seems to be set to an enormous number. The tables are very wide, and the right hand column & google ads overlap your content. Is this a problem with moveable-type? Jonathan

Hi. I have been using CSS for a while, but I usually don't post on sites because honestly I don't consider myself all that knowledgable on topics like this. This one has been bothering me, and I went so far as to provide what I normally do for this as a solution to essentially get your input on why this is not a good solution for what you are suggesting. http://www.ernestsalazar.com/rounded-box.html I don't know all of the browser compatibility issues with just assigning an alignment to the two right hand images to creat your right hand corners. Please feel free to flame me on this, but it just seems like this article is a way too complicated solution.

I'm sorry adam, are you saying that the image align issue is a bug in PC-IE 5.5? I work on a site that is primarily concerned with the new browsers, and I tested this solution on PC-IE Mac-IE Firefox (both browsers) and Safari. I am going to test on Opera in a couple of minutes. http://www.ernestsalazar.com/rounded-box.html

I'm sorry adam, are you saying that the image align issue is a bug in PC-IE 5.5? I work on a site that is primarily concerned with the new browsers, and I tested this solution on PC-IE Mac-IE Firefox (both browsers) and Safari. I am going to test on Opera in a couple of minutes. http://www.ernestsalazar.com/rounded-box.html

My question to all using IE 5.5... Why are you using IE 5.5??? I mean come on, Adam's right, the browser is too old and obviously has bugs related to CSS. So to answer your question, no it's not a problem with MT, it's a problem with your out-dated browser.

> Ernest Salazar I think the issue here is using proper CSS for media other than your web browser. This is bascially an issue of Accessibility. Say that you are using your code for mobile phones, etc. Your example will force the user to see graphics no matter what. The same things applies for the example here. I'm not debating wether this is a good thing or a bad thing, but the fact is, that you are forcing these images on the media. I think the goal of most CSS is to create code that looks "clean" as just text and then having a style sheet that adds all the layout and fancy graphic elements. This is the goal when using CSS, unfortunately with all the browser bugs and browser incompatibilities this goal is hard to reach.

Great article! I only wish I would have found it sooner... I am now trying to center the box on my page, and it seems to be working great in IE and Firefox, but not in Opera 8.5. The problem is that the left-side img's that are in the html aren't sticking to the left-hand side, they're being centered also. Maybe I'm doing it totally wrong. Here's how I have it set up currently: I put a before and after the box's html, and then I added a text-align:left in the css so the text still aligns on the left of the box. Works in all but Opera...? What am I doing wrong?

Thankx for the example, just wat i was looking for!

Adam I have been hacking away at this for hours with no success. Finally I cam across your tutorial and it worked for me. Thank you so much!

I've wrote a simple script to generate necessary corner image for any color/background. http://bloffer.com/roundedcorner.php

hellow. I am learning CSS. I have copyed you code and is working. but when I am replacing you pics with my corner pics lock like s... 2 of them are shown on the etire row - the one in . how can I size them so dont become so big?

You can extend this trick to work on any background color or even round the corners of images without generating new pictures for each one. Make the original set of corners on a white background, then make the color of that corner transparent. You can make this look nicer by using anti-aliasing using a transparent PNG.

Hi Adam, I'm the owner/webmmaster of CustomHookahs.com and I designed my site from scratch using tables. It looks descent and it got sales, but for the purpose of less code(smaller file size) and for Search Engine Optimization purposes I would like the div and css version instead. This will reduce the file size and the load time for the user. It will also allow me to have the main content closer to the top of the code so the search engines can find what they are looking for sooner. I would like to know how much you would charge to make the div css version for this page(http://www.customhookahs.com/Bohemian-Hookahs.aspx)? Also I plan on making a few site changes and it would be convenient if we can make the change while we are making the div and css changes. If you are interested, please let me know and the price you would charge.

Dear Adam, Top banana website. Great tutorial and thank goodness there are sites like yours with clarity. I am CSS newbie and am trying to design a table containing a nested table with both of them having round corners. I read above about the halo element surrounding images which is driving me nuts. Do you have any advice on how best to create the round corners for the table using either a CSS or with standard images? Any help would be appreciated as I am about to throw this laptop out of the window - many thanks. Cheers, S

That was the best, and simplest explanation for round-rects I have found. Good job and thanks!

Just wanted to say that I really like this approach, and was wondering if anyone has had any conversation with a roach or armidillo lately, hence forth hither to?

Css Vault has a good method but isn`t aviable now... (too many divs) I don´t rremember the code but the article was in http://cssvault.com/articles/too_many_divs.php

My hole problem with this approach is the the html contains reference to the images. if you have a site with two different skins provided by a css each this will not work fine. Anyone found a way to have all the image reference in the css ? MC

Here the types free one... :( My whole problem with this approach is that the html contains reference to the images. If one has a site with two different skins provided by a css each this will not work fine. Anyone found a way to have all the image references in the css ? MC

This technique is simple and fine. But I want to create rounded corners without any background color. How do I make changes to this?

Very useful, look forward to using it, thanks! :)

Hello, I just did a search on Google for "round corners, css" and this was one of the first listings. Thank you very much for the little tutorial, it helped me get an idea of where to start.

The only real problem with this system is when it comes to printing - by default most browsers will print img tags but not background images or colours - you just get the top and bottom left corners. to hide these you can always use the '@media print' css rule.ie @media print { img.corner { display: none !important } }

to make it work with XHTML 1.0 Transitional, include the following text-aligns: .roundtop { background: url(tr.gif) no-repeat top right; text-align: left; } .roundbottom { background: url(br.gif) no-repeat top right; text-align: left; }

Hey! Supernice. I was actually searching for some css which produces rounded corners without any images but I think this technique would require javaScript which I do not favour. So I guess I will play around with this a little. Do you think there is a way to put all images in the CSS? Greetings from Dresden, Germany, S.

Adam, thanks for a very simple and easy to use way of creating these rounded borders! :^)

Very simple and useful solution, I was looking for it long time.

I have problem with some css coding. Can anyone help me. I have used the manginy effect. I have put the thumb in a tbale becasue I could not make them in a line using CSS. the biggest problem is the bigpicture. It has to stay in place alle the time using CSS. It changes on mouse over thumb. It looks fine on 1024x768 , BUT when I see the page in a higher screen resolution the picture moves and it must not. Is it not possible to use CSS to have the picture in the same place in all screen resolutions.?? Do I have to use javascript and only tables to make this work. I would be very glad and appriciate any help. Kindest regards Nina

Great little piece of code. Got this working in no time. Thanks.

Wicked! I used your trick on my open source template design seen here http://openwebdesign.org/viewdesign.phtml?id=2628&referer=%2F

AWESOME! Works like a charm.

Nina - Use absolute positioning.

Nina, Put "position: relative" on your main containing div, and then put "position: absolute" on the images you need to stay in place. When an asbolute element is placed inside a relative element it will use the containing relative element as its boundary.

Thats great , i was searchin , for somethin like this ... Great outside , Light inside . THanks BRO

Nice. I was alwaus making 3 divs and cut image to three parts(of course fixed width). This is expanding possibilities!

Nice work

Nice and concise piece of work, indeed. Only I've tried the "negative margin" method to get the paragraph text to expand higher and lower. This works fine at the top but the bottom corners seem to cover the text... Can this be solved somehow? Thanks (for sharing 2)

...and what if you got an image or photo on the background?

Smooth solution, thanks.

Nice job. I'll use this - thanks

pretty cool

Fantastic piece of work mate..

Cheers mate, looks nice and elegant also.

Wow. This is really nice! I thought it only can be done using 9 cells table. Great!

hello. good job. but it don't works!!! (???) i only have the "lorem…laborum" on white page… (sorry. what i don't do?)

ok, it works. thnaks

A better way would be if we didn't have to use -tags. The corner images are never relevant to our content. If there was only a way we could attach more background images to boxes. This method is just as good as yours. http://www.redmelon.net/tstme/4corners/

*img-tags.

using images for rounded corners is so yesterday and obsolete now that you can accomplish perfect rounded corners using only CSS http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/

Some versions of IE have trouble with DISPLAY: NONE, so heads up!

Just wanted to say thanks for this resource. I had been reading it thru a few times and today worked it out on my personal site with minimal changes. My personal next step is to see how well the rounded corners nest within each other, but other than that, there is nothing with this that I couldnt learn from. Thanks again.

It's more generic if you use images with transparency on a background colour. In the example case replace the orange with a transparent section then the corner images can be used on blocks of any colour.

Hi, Nice job. I have one question though. When you create the rounded square image what did you use ? Also if I created the image how to I make sure the edges when cutting them up are even so they are the same? Thanks...

I appreciate you guys' sharing. Richc, would you please tell me how to make images (tl.gif, tr.gif, bl.gif and br.gif ) with transparency on a background colour? Currently I need it customized as the preferred color. Thanks a lot for your time in advance. Lotus

Please help. I get a large outline and cannot see the right side corners.

I can see the right corners now, i adusted the width. But I still have a large outline that is the color of the bg? Help PLease

Got it

Never mind...

The round corners can be created without images of round corners with less than 25% of the code required using images. I saw it, it's in my favorites on another computer in another city or I'd give you the link. Throw this corner-image method away.

How to make gradient corners?

hey choim : why dont you get out of here with your foolishness...

choim: probabily he just saw the mozilla's own implementation of rounded corners as an extension to the "mozilla standarts" and he thought it can be done cross-browser-wise. peh until w3 acccepts we MUST use image based rounded corners

I know of only one method that gets you rouned corners without images, and it involves JavaScript. I personally prefer just using images.

Thanks for this tip. I've just started looking into round corners, but it occurs to me there might be an alternative approach which doesn't involve changing the HTML. That would be to put the corners inside the content DIV (roundcont) and use a margin to separate them from the content. It should be possible to do that using CSS only. Has anyone done this? Am I missing something obvious?

I've been after a simple way of getting my site to look a bit more modern and naturally the question of rounded corners came up. I saw a few tutorials but liked yours the best. Keep up the good work!

Hi, been great working through this, but can anyone explain why I can never get top right and bottom right corners to show?

Tried this and it works great, however when I try to add an image and float it to wrap the text it all goes wrong - have you any ideas? Thanks in advance

Im confused, sorry to say this, but i just dont get it, where do i save the css file? under what name?

Please, Structure first!

Nice, and it works fine on screen, but when i trie to implement a print-friendly page [txt only] with the ' @media print ' rule i can't switch off the topleft and bottomleft images. Is there a way to do this ?

This is a great method! It produces a little extra markup, but if you're in a rush (like I am now) then there's no better way to get rounded corners up and running... I had them done in about as long as it took me to copy and paste the HTML and CSS. Great work, and thanks! Pat: Save the CSS anywhere you like, and call it whatever you like, just make sure that the page you need can see it :)

I am trying to use 3 images (cut from one image) to create a metal plate navigation bar in a frame. I have tried many different code sets for the CSS and HTML and cannot get this to work correctly. I am working with a left image, a center image and a right image. All are 900px high by 100 px wide. I can get one of them to work correctly, but not all of them. The left and right images should stay constant and the center image would repeat on the Y.

This is one of the better examples I've seen on the subject. Thanks for making it easier to follow!!

I would like to make a standards compatible cross-browser/platform CSS text button with one line of text an a tiny image on the left or on the right aligned nicely with the text; no JavaScript. I had no luck so far. Any suggestions? Thanks.

Wait this doesn't work, you can't define style="display:none", it takes precedence over the style sheet, therefore the images will never be displayed...

I am newbie in CSS and this guide is very useful for me. Thanks for the great work. I have a question though. What to do if I only want a box with rounded-corner borderline?

I would like to say thanks for this very useful code. I had been looking for this for some times. Thanks again!

I was mystified over how the class styling took precedence over the inline styling until I looked up the "!important" part. So the whole thing was double-y educational for me. Great job, thanks.

Hey thanks, that's another technique to add to my arsenal. It's amazing how many different ways of doing it there are - roll on CSS3!

It works, but only if you match the background colour for the image (in this case white) with the background colour that it is to be used with. If you used a gif image with any transparency, the effect falls apart.

Hi Adam, I'd like to have rounded corners for the actual site template, not just individual boxes within the site. I've tried doing this with your script, but seem to be having problems. Will this actually work the way in which I want it to, or is the script just for individual boxes within a site?

Thanks for the trick! Does anyone know how to include a border (1px solid) in roundcont without it "spilling" over the corners?

This will only work for color-based background, and use the rounded images for the corners. It won't work when the image needs to be another image, e.g. a gradient color.

Is there a way to do this without the corner images?

The article is great. Isn't there any solution that will make the thing running without using any image and just CSS ?

Nothing really special about this trick, just logical thinking. Simple yet efficient. Only downside I see so far is that, when the user prints the page, not all the corners are printed along since most browser settings are set to not print background images.

Can anyone help please? Maybe it's just me but - I just removed a beta version of IE7 form machine (leaving me on IE6) and IE6 does not display the corner or colored BG. Probably an IE question but any ideas?

Scrap that - there was a problem with the linked CSS file! Thanks for the code

I have copied and pasted the code into my html editor and designed the corner gifs. I get the top left, bottom left inside the orange box, and the right hand corner gifs are stretched, inside the box and not in the corners. Any ideas ? is there any code missing ?

Is it just me or when i have pasted the code into my editor and tried to preview it in a browser nothing happens?

Neat little trick. Bookmark-worthy. -Thanks! -Joel

Great tutorial. I am still trying to decide between using images and using the non image method. But your solution is so simple. Thanks for sharing.

Nice piece of code, but doesn't work in IE6 as a rounded corner box inside another box set at 100% or max pixels. Other than that it's good. Let me know if you know of a solution around this. Thanks. :)

11/24/2006 Great! This code is the best and easiest I've read. I will depend on it to create my own ones. You should accept donnations ! Good, again and thanks.

Awesome! ))) Tableless design rocks. Let the tables do the tables' job.

XLnt! I shall build a web edifice with rounded corners in your name...I walked the earth in shame because I hadn't mastered the round-corner thing. No more. Now I am whole! Seriously: Consider your site bookmarked. Thanx!

Definitely prefer this method to the JavaScript possibilities like nifty corners

Cheers. this saves me all the problems I've had extending some of the JavaScript based solutions for rounding corners on divs. Thanks

Is there any smart way of simple just change the color on the corner-images in for example PhotoShop? Thank you, Eric..

Just select (magic wand) the surroundings of the images (white area) and Press Ctrl + I. Now you've selected the orange part and you can fill it up, with your paint bucket.

This works great in Firefox, but for some reason in IE7 I'm getting a small strip of the box-colour below my bottom images. If I change the CSS to "bottom right" for the bottom corner, it fixes that corner. Unfortunately, it doesn't help the bottom left side. Is anybody else having this problem in IE? Like I said, Firefox looks great. Thanks, Matt

Scratch the last comment... forgot "display:block"

I would like to create rounded corners for various parts of my web site. For example, the body, the navigation bar, tabs, etc. How do I know how large to make the corner graphic elements? Is there just a standard size that works for all situations, or do I need to customize the corners for each section of the site? Any guidance you can provide in this area would be much appreciated.

I love your article and have used it many times now! But with this one site I keep getting this little strip at the bottom where Matt was talking about too. I do have display:block in the img.corner tag in my css file. In FF it works perfect (ofcourse ;) ) but in IE(6) I get this little strip at the bottom. Can anyone help me with it? I'm currently still designing the site so it's running on my localhost: http://82.73.86.48/fl0ppy/ . That link will only work when I'm at home and my computer is online. (Most of the time ;)). Cheers

Works fine 4 me here on my FF and Ubuntu. Thx for sharing it. Keep on coding! Der Klempner

When I adjust the window size to manually test from the browser a bug occurs when the scroll bars come into affect (when the graphics cannot be adjusted freely anymore). This is where the right corner continues to float in (when it shouldn’t) because there is no spacer image to force it to stay put.

I build layouts on myspace and I have tried to host the html in a text box in my blog until I get my site up and running . Other layout sites have given me different codes to try and they all do the same thing when people try the HTML layout code the background doesn't show up but the contact box and the network box does .. So what is going on have any clues .. Here is one of the codes I have tried to use . STUFF Also I hope somebody can help and tell me why this is happening .. Thanks , Dragon Star

Mine works perfectly in all modern browsers, except for the header tags. They don't respond to the margin and I can't get them to sit in line with the rest of the body text, they butt up against the sides. I am using this technique to build a central body area for content. It is a 3 column layout.

Very usefull Thanks a lot !

I really wonder how so slice those corner pics!! thanks in advance for ur suggestion..

This is great. I'm just having trouble getting the left corners to work. Top and Bottom. I don't know what's wrong. I have my code the same as yours. If anyone knows what I'm doing wrong please email me at the-musicinmyhead(at)hotmail.com

How do you make it with a white background?

For some reason the browsers are not displaying the right (background image) corners on my page. It displays correctly in the Dreamweaver window but when viewed on IE or Firefox only the left corners are rounded. Anyone have any idea what could be going on?

I have been looking for a tutorial like this forever, this was a HUGE help, thanks!

really it an good technique to get a rounded rect

Cool, I am trying to put rounded corners in an Ajax tooltip, I will let you know if it works, Thanks!

This is much easier method to follow than others I've found. I actually understand your explanation.

Very simple and very nice..thankyou very much.

This is is a really neat solution, I've been trying to do this for hours. So thanks alot Adam, now got you on RSS for future ref !! LOL. But what would be a real WOW effect would be a 'turned' up bottom right corner like when you turn a page in a book!

Can't seem to get your example to work. Have the images. Have validated both the php page (as html) and the css files. Both clear the validation. But the right hand side images don't display. I'm sure it's obvious, but .... Can anyone help? Cheers Brian

It could be to do with the alignment or transparency. To visualize...if there is a div with the same background color as your corner image, and the image has a transparent background, it will simply blend into the div. I encountered that as well. I've now adapted the code to work with corners that have transparent backgrounds. This means that I can change the background color of my page anytime in the CSS and not need to create new images. If you're interested in seeing the code, let me know. /xpurtwitness/@/gmail/./com/. (Remove the slashes--spam savers!)

On top of the web because of this explanation... thanks a lot... Susheel

One other thing, what about the other two corners? In the html I only see code for the left corners and in the css code I see only for the right corners. pardon my ignorance

Brilliant tutorial :) This is exactly what I have been looking for.

Hallo, This Article is a good. I can a Book Name Bulletproof WebDesign. In this book is moore rounded corner & co.. I´m Thanks for this Article.

Awesome tutorial. Now I just need to learn to do it with transparent images! Thank-you so much... finally, it makes sense!

Thanks for an awesome tutorial. So easy and effective!.

thanks i was looking for this :)

Excellent tutorial, very simple (and easy) way of rounding up the corners!

This is great! Thanks!! I found that when setting it up for a new site I am building when nested in a div the .roundcont - needs a margin of auto. http://www.whelandesign.com/clients/hvt/2007/ Thanks! peace tim

Brilliant Good tutorials !!Recommended for all begginers

Its dope.. but safari broswer dont work with that code seems like that.. bummed out..

Quick and very clever way to do the round thing. Very nice.

how do I place two or three of these rounded areas on the same line with a little spacing between them?

I put my version back up. Sorry I took it down. Just noticed people going to it. It works in Safari 2.0.4 on my MAC. peace tim

sorry here is the link http://whelandesign.com/clients/hvt/2007/

Thanks very much.. This is really simple..

Do you have some fix for IE7 when you zoom page by scrolling mouse+ctrl? There appear borders.

...never mind. I just didn't have the path to the top and bottom left images set to my images folder in the HTML... :(

what if i want to add a border? how do i do this?

For you rounded corner fans, i've stumbled upon an instant way to add rounded corners to your images, so once you get your html corners rockn, you can simplify the lengthy process on your images: http://www.EzRoundedCorners.com enjoy! Kim Leetz

so helpful thank you!

Thanks for this.

It would be nice if you can make entire box highlighted when you put mouse over the box. Just my two cents. This code still works great, though. Thanks

The problem is that this doesnt work if you need your rounded corners to be on a transparent background. (i.e. your background is gradient) This is because this method relies on the corner images to use an actual background color.

Hey that is pretty cool! I didn't consider that. And thank you very much for your reply. However, I didn't articulate my concern correctly. :( What I meant was that if the entire box (which has rounded corners) was on a background that was gradient (i.e. the page background was a gradient) then the corners of the corner images would be noticeable. That area that is just outside of the actual color corner pixels in the image. Am I making sense?

When I try this I only get the top left and bottom left corners round. The right hand corners are still square. I am using ie7. Am I missing something, I've just copied the code you give.

How can I get round corners with white background and thin border around the box?

hey i was also wondering about the background being gradient idea as above. I must say that this is some of the best code iv seen yet. thankyou for this :)

hi, when centering this box, the rounded corners also center and ruin it completely. How would I center this, without that happening. thanks, Matt

great code!

As for the transparency issue... you could simply use transparent GIF's for the images and set the section outside the rounded corner to be transparent...

Hi Adam, I want to thank you for this article. I have been searching for two weeks on how to do this and have tried method after method, I have only been successful with your way. I am new to Dreamweaver and PhotoShop (don't know how to use PS yet). I'm struggling and getting very frustrated. Your article has let me take a good step forward but now I'm stuck on the colour. I need to change the colour of the rounded corners to white with #999966 as the background (I'm still working on the new web site so the one at the above address is still the old one I did with Publisher). I have spent hours trying to change the colours and spent hours trying to recreate the graphic to no avail. I've even tried to do this in Corel Draw with no luck. Can you help at all? Deb

You f****ing legend. :D

What I did was just specify a height and width attribute for my div and then make an image that size with rounded corners and made it the div background. Works well enough for a personal website.

I'm having a problem with your tutorial. It works fine with firefox however in IE the bottom left image has a small (1px) live under it. This seems to be from the box background and if i alter he heit of the bottom right image in the CSS i can recreate the problem on both sides. Anybody have any ideas? Many thanks.

I'm having a problem with your tutorial. It works fine with firefox however in IE the bottom left image has a small (1px) line under it. This seems to be from the box background and if i alter he heit of the bottom right image in the CSS i can recreate the problem on both sides. Anybody have any ideas? Many thanks.

I've fixed it. Thanks for the code. If anyone has a similar problem just alter the height of the bar (top or bottom) that contains the corner causing the problem. If anyone could explain what causes this that would b cool. Many thanks!

Nice code, could do with being expanded with more complex images i.e the images used are just 1 colour what if they had a border which meant the main content would also need a border? Either way very good tutorial

I do not know why, I did everything but it didint work =(

I think i have spotted a typo .roundbottom { background: url(br.gif) no-repeat top right; } should be: .roundbottom { background: url(br.gif) no-repeat bottom right; }

Can any body tell me how I going to create the rounded picture?

Can someone please explain to me how you can use transparent corners? What if you have a gradient background? You can't use this technique and the following makes no sense to me. "As for the transparency issue… you could simply use transparent GIF’s for the images and set the section outside the rounded corner to be transparent…" Coereo - you need to know how to work your way around a graphic design program

Four rounded corner on a:hover? Technics not found...

How do you achieve transparent corners? What is the code?

For rounded corners draw a circle and cut it in 4 pieces ;)

Cant seem to get this to work if the is placed in a table

It works perfectly within a table, it is what I've done also. Just don't hurry, follow Adam's 'wonderful' tutorial step by step, add adjustments if needed. Pretty old article, but now I found it. Great job

The code for transparent corners is really the same. The biggest difference is in designing the corner images. You need to build them on a transparent background and preserve that. Then any CSS background color will show through.

Worked fine in my head.

top right and bottom right corners are working fine but what about top left and buttom left...Its still the same.. Can anyone help thx

The typo posted by dave fixes the bottom right corner in IE 6/7, however, I am still experiencing the problem with left top/bottom corners in IE 6/7 (looks the same as bottom right corner before typo fix). Any suggestions?

I found this to be very good. I've seen those other css based tutorials that are too complex. I agree with you..if it takes 100 DIV tags to achieve...what's the point? Thanks again.

There is a typo in the CSS: .roundbottom background image= Change "top right" to "bottom right" so it looks like this: background: url (br.gif) no-repeat bottom right

This doesn't quite work...something is missing in this tutorial. Unless I'm missing something. I used my software and another plain text editor...doesn't work.

That really works. Thanks.

Follow this way is not good. too many div tag in source code. In that, i only use 2 div for at all. bla bla... But thanks :)

Or you could just take advantage of css position, which also allows to create multi column layouts in a easy way. The sooner IE6 is ditched the better, and IE7 support for position has been improved allot.

This is an old and well proven technique. But what if you want a nice black border around your rounded table?

how do I insert a div that floats left inside of this?

never mind -figured it out -added clear: both; to .roundbottom

It works like a charm (on IE7, FF2 did not try other) I put the code outsite, and stick it in with 2 includes (1of2 and 2of2) Nice simple and oh so clean. Mega Thanks!

Don't use <img> tag - that is out-of-date method !

Having an issue with IE (6 &7) with .roundcont p continues one single line, instead of breaking in to paragraph form. I have included width and still doesn't fix.

what if you want to have the corners transparent?

Is this totally free? We are thinking to use it in our company and we are wondering if we need to buy license. We are ready to pay for license if required, Please let me know, Eddie Moses

Very Nice.... Worked for me. Thanks.

worked great for me, thanks!

Worked great on all browsers!

Me ha gustado por su simplicidad aunque sea un método antiguo Gracias

That's a really useful explanation. You explain the process much more concisely than most other people writing on this topic. Those who would rather not use a graphics program to create their initial images might want to check out a new application I have been working on at http://www.thoughtless.ca It will let you change the size, shape, and color of your corners directly in the css, without without using a graphics editor.

BULL SHIT its not workling at all i wanna use this inside a div tag which forms my page's left colum

Eddie I am pretty sure this si just how to do it... I don't even know how you would copyright orange square. If I could I would be the richest man in the world! All hail my box: _ |_| Seriously though, thank you very much for this...

Thats awesome! I do not feel very comfortable with creating images, but the overall idea is cool. Thanks for sharing! adi azar

I am getting a white bar (my 'inside' color) a few pixels high below the bottom of my box. My corners are 15 px high and my top looks good. So close... Any thoughts?

Looks great, I'll give it a try. Much more efficient than the way I usually do this.

Thanks. I have some problems with IE 7, 'cause I have "text-align: center" at body. My solution was add "text-align:left;" at "img.corner". (Sorry for my English)

This will not work on a gradient background or an image background... How can you do transparent corners? Need Javascript?

Adam, but the transparent image would display the orange background-color of the div behind it, not the background of the parent container.. or?

Yes this is what i wanted. Is same thing not possible without images? What i am doing is, using 2 to 3 tags for round corners at top and bottom. want to avoid such a code.

Hey Adam, Cheers for the concise explaination. This technique works incredibly well, is easy to code and looks great! Thanks for sharing :)

Its there to take eddie... copy and paste and all is free

hi, I am trying to code the example above and this it is a good way of doing it. I would be grateful if anyone could give me advise on how to put three divs one next to another on a page and have make sure their height is one and the same all the time, taking the div with the most content into consideration. Thanks a lot. Nadia

Hi Adam, Thaks for a great tutorial. However, I'm having the same problem as Rachel C, with the 3 pixels sticking out at the left in IE6. I can recreate the effect when I make the window of firefox or safari smaller. Any ideas? Cheers, James

Hi Nadia, Two methods come to mind. The first uses absolute or relative positioning so you can control to the pixel level. The second involves placing the three divs inside other containing divs. There are several strategies for the latter approach but remember that the box model manipulations really only account for two items side by side. To get complete control, you need to add divs every time you have two boxes. So for three boxes side by side, you need to group two inside a containing div, then group the containing div and the third box inside an outer div. Good luck.

Hey Adam, The technique works great for me, other than a problem I'm having with divs that are floated right. What I'm trying to achieve is the rounded corners only on the right side of a div that is also floated to the right. If you have any suggestions, I'd appreciate it. Thanks

Thanks! Great explaining of the code, will help my css design skills greatly!

Thats cool way, but i hope CSS nerds like you can figure out a way for us to do rounded corners without creating the images. Thanks!

I have read through a lot of feedback where people say they are getting a bar a few pixels high at the bottom of thier box (in IE). I haven't found a straight answer on how to fix this. Would you please save me some time and let me know? Thanks!

for a way without images try googling "niftycorners". this is a very good way also though.

Okay. So. Doing this layout: http://www.midnight-umbreon.net/other/layout.png and. I only need one rounded corner. The top right is done by the header image. I only need the bottom right. So, I created three other images that are just squares. Would this work?

Have to agree with Stuart -- what can we do about the bar at the bottom?

It is not just good way. It is so simple you are saying about but I want to never use any kind of image. Only use colors and then make it round corners. it is no matter that what do you use, table or div. but i need you to use colors and and make round corners.

try giving 0 margin and 0 padding of each div. I understand different browsers have different default values and this may be causing the bar at the bottom.

OMG. You say DIVs are so great. Then create a good 3x3 box code in few minutes, just like when using tables. Tip: the code above is not a GOOD one. In fact it sucks hard: it will break the transparent (gif, png) corners and borders. Is it so hard to create a REAL 3x3 layout with DIVs?! DIVs are theoretically nice, but they do suck like hell in the real life.

twoja stara, why so negative? divs eat tables for breakfast, you just need to get to know them... thanks for the excellent code Adam

Hi Adam, nice example its great but i have an question is it possible we can do it same with border corner .imeans to say we have a rounded box with border how to make tht in html

Well, it worked even in safari, in addition to all other browsers... I reallized that I can do this css corners using a background image (I mean the entire thing using image). it may be bad since it is going to take more time for download.. ur solution is better, but if u lazy, u can create 1 image using adobe, and place it as background.

Great work, worked on all browsers.. gonna use it on my website :) Thanks, Alan

Great css, it worked on ie, and firefox for me. Thanks

i dont gett itt :-| everyone says its really easyy omg im soo thick! pleasee explain.

What am I missing? www.ntbcravenna.org I need this to work

You can just do this with two images as well. The top two corners---the middle text box as a style, and the bottom two corners as an image.

How is this site made? http://www.southgatefc.com/ I like the white space in the middle with rounded corners. Do I make white corners? not sure where to start? Any help you can provide is appreciated. Thanks.

Just wanted to point out that now some of the tasks involving creating rounded corners can be automated with XHTML/CSS generator called Artisteer. There are many cool types of content blocks with rounded corners, as well as the page design itself can have rounded corners. The corner graphics is created automatically so you don't need an image editor. Cheers John

Its nice but you can also add to the css: .roundtop img{ outline: none; } I didn't test it out but I think it doesn't allow the image to be highlighted. From my knowledge. If anyone tries it out post the results back here :) Cheers!

Thanks for great tutorial. Here is another round corner generator: http://www.roundz.net/

I have fount a nice rounded corner thing here on http://www.htmlremix.com/curved-corner-border-radius-cross-browser/ . It is using only 3 line css and one htc file for IE. It works fine .

twoja stara So, what doesn't suck in the real life? Maybe it's the magical tr element? P.S. Nice tutorial, Adam.

I was trying to use this for making rounded border, what I did was wrapped your code inside a div then used curved corner images and usual border to the div in css so that it makes the complete rectangle. Now problem is those curved images are behind the div border, how can I make them appear above border to that its a nice curved rectangle ?

i need also tail for it, like think bubble

can you make this with only one picture... so you don't have 4 corners but only one small image with rounded corners .. so the code should know how to cut the picture... and wich section of the picture should repeat ? alex

Looks really good with one exception- on IE6 I am getting wacky results on an absolutely positioned div... any ideas?

took a bit of fiddling to get to work on my blog but no fault of your code, cheers for that, nice clean code!!!

using the method explained in the tutorial, why wouldnt i just build a table and put the images in the corners?? i can make the table a % or fixed size, which is basically what you've done with the code only in a different way.

Works great. But you might wanna change the "top" to "bottom" in the following line since it might not render properly in some cases. .roundbottom { background: url(br.gif) no-repeat top right; } Cheers!

Thanks for great tutorial.

interesting attack on the rounded corner box.. i typically use the top and bottom divs empty with a bg that is the entire top or bottom. & to "graphics guy": "why wouldnt i just build a table" lol. tables are on their way out.

Hopefully the table comment is a joke, but if not, basically because tables display differently on every browser and were not created for use as layouts, only for ACTUAL TABLES. Even for those they can have some big issues on some browsers, best to avoid tables whenever possible.

This is really nice, clean and maintainable way of creating rounded corners using CSS. I know it requires images, but this will ensure that the website will work for every single browser. Thanks Adam Dan

Rather cutting image for each corner, I would cut whole header, and footer. thanks

Wonderful. Isn't CSS a style language? Then why do you have to use markup for style?? You could use tables also. That's why css sucks

Simple, clean and not over-done. I like it, and it worked. My previous solutions was for images, but the absolute positioning didn't work in IE6 for the right ones... apparently placing the background image with a right offset works.

The nice way to make Rounded corner I found is on www.htmlremix.com , a blog by an Indian geek. With 3 line css he archives it. For ie a htc file. See it here http://www.htmlremix.com/curved-corner-border-radius-cross-browser/

Great and simple script, but I'm having an odd issue. The right corners show up while the left ones don't. I'm using Firefox 3. I had to add "images/" in front of the four references (two on the script and two on the style sheet) since my images are located in a folder with the template and css files. But what I get is a squared left side and rounded corners on the right side. I saved the corners as jpgs since I didn't want a transparent background. The images have .jpg on them. I've double and triple-checked the code and it's not working. Any idea why this would be happening?

And, I'm doing this inside of table cells. I forgot to mention that.

Hi, thanks for this guide - it's good for reference use! Unfortunately it seems that it is a little temperamental between browsers but still its very good. Thanks again.

IE 6.0 ?

CSS3 promises to deliver some VERY cool features, one of them will be easy rounded corners. As usual, i'm sure we'll have to wait for Microsoft to finally decide to catch up. @ eegii - Firefox!?

That's an awful lot of presentation in your html just to achieve rounded corners. To me, this is every bit as bad as using tables for layout. Why not pass the webkit and moz radius corner through css and let IE users get square corners?

Wow! All that for rounded corners! All what you need to do is to opn photo shop and create small background image and set it as a background for the div... Thanks!

Hi I want a different color as background color, but then these white edges appears arround my corners. Any solutions for this?

This is ok if you are using corners with a background... Unfortunately not so good for corners with transparent background... Ph well, back to the drawing board I guess... While I would prefer to simply create a small background for the div, it needs to be scalable... The height is always going to fluctuate based on the text within the div and I don't want to place a fixed width - I like flexibility!

You can use the same method for transparent corners, just make the images PNG. The top, left, bottom and right borders (not corners) will need a small PNG as well, and probably another for the middle content area. If you surround the table with a div, you can do some really nice effects, like the MAC OS growler. I wish everyone would stop blasting this method. It is currently the only way to get rounded corners to work in ALL browsers while still separating presentation from CSS and javascript. CSS3 won't be fully supported by all browsers for at least another few years.

Nathan, the problem with rounded corners is that the background color from the container will show up behind it. But indeed, the bashing is ridiculous. If you say CSS sucks go get a crash course in web design, if you say use a table go get a crash course in web design and if you say this is a lot or markup, go browse other solutions.. jeesh

Doh, I meant "the problem with transparant corners" not "rounded corners". Sorry.

I'm very pro-image-based rounded corners because I think anti-aliasing is important. If you have jaggy rounded corners, they're not really round, are they? More of a distraction than anything... So I think you're on track in that regard. Unfortunately for your method, it assumes that the background color will be solid and unchanging. Probably fine for many people, but not for a wallpaper and gradient junkie like myself. There really is no good solution that I've seen. I still think the best way to do rounded corners is with a 9-cell table having a transparent PNG in each corner. It makes me sad to say this because I really would like to keep everything CSS, but CSS fails at rounded corners and that's the bottom line. :-(

Short way: background: url(cornettopleft.gif) top left no-repeat, url(cornettopright.jpg) top right no-repeat, url(cornetbottomleft.gif) bottom left no-repeat, url(cornetbottomright.gif) bottom right no-repeat;

How would you do this with an outline?

Hi Adam, Thank you very much for your code. It works beautifully. Now, how would you do it if you wish the borders with a different color than the inside? Thanks in advance for your help. Warm regards, Rox from hot Lima in Peru, South America

very good method to use . it might be better if there is a way to curve the edges without the images

I have this same problem. Hi I want a different color as background color, but then these white edges appears arround my corners. Any solutions for this? =(

TIM - I think the white edges around your corners are caused by a white matte on the .gif img corners. I'm guessing that you have a fairly dark background - right? TO FIX - re-create the corners in whichever graphics program you use. When you save for web set the matte to the same color as your background. STEPHEN - Easiest way to get a border around this is to recreate the image with a border and save them with no transperancy, then just use border: solid 1px #ccc; on the class .roundcont. Ajust colour and size to suit and you'll have a rounded corner box with a border....

This may look like a lot of coding to do round corners, it really saves a lot of effort if you have to make more than one round-cornered box. You only have to write the css once and you can use it over and over. Plus, it's a lot easier to manage than the old nine-cell table method.

Good tutorial if I've got complex imagery to use as a background. For the easy, everyday rounded corners and rounded div backgrounds (widgets), I use www.easyimg.com. Thanks again.

I believe in Microsoft Web Developer Studio or whatever they call it, you can do rounded corners at the click of a button... whats the chances that its not compliant code though!?

"STEPHEN - Easiest way to get a border around this is to recreate the image with a border and save them with no transperancy, then just use border: solid 1px #ccc; on the class .roundcont. Ajust colour and size to suit and you’ll have a rounded corner box with a border.…" FYI, this doesn't work.

Hi Adam, Your css works great, http://evolution.server101.com/contacts.htm I used it for the trading hours. Question for you, how do I put it with in the existing dive that makes up the right content instead of it clinging to the left edge like it does now.

this is not a professional method to create a round corner image using css

Effective but still easy to follow...I wish those two things went together more often :) I've been looking for a technique simple enough to convert into a reusable user-control for an asp.net project I'm working on and this might do it. Thanks for sharing Adam - much appreciated.

Keenan, Adam's css technique is super but your site..... :)

nice tutorial and easy to understand. thanks Adam *smile*

nice tutorial and easy to understand. thanks Adam *smile*

Its a nice Coding thank you...

I hope people do not start using this method. This is not semantically correct. What if you want to change your design later and you don't want your boxes to have rounded corners? Now you're stuck with random rounded corners in the sides of boxes because you have hard-coded images into your code. For someone looking to create a "one-and-done" solution, this will work, but for someone looking to create manageable, maintainable code, this would be a nightmare, especially if you wanted to use this class elsewhere in your site.