Comments

Comments for Rounded corners in CSS

Excerpt: There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. This is simpler. Read the whole article…

Rich Manalang
July 23, 2003 9:26 PM

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.

Adam Kalsey
July 23, 2003 10:30 PM

A transparent GIF has a slight halo of whatever the transparent matte color was. You can't put the image on another color of background without the halo showing. That's why images that look transparent on a white background look so bad when you put them on a dark background. You could probably create an image with two very similar colors and the antialias halo wouldn't be very noticeable. What a transparent corner would do, though, is let you push the text closer to the top and bottom edges. With a transparent corner, you could change the P style declaration to have a negative top margin and the text wouldn't overlap the image.

Dave S.
July 23, 2003 10:33 PM

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

Adam Kalsey
July 23, 2003 11:11 PM

Yeah, about the same time we don't need to work around IE bugs.

kristine
July 24, 2003 12:24 AM

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

Jesper
July 24, 2003 2:07 AM

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.

Paul Scrivens
July 24, 2003 5:21 AM

Awesome. Thanks for the article.

Taranis
July 24, 2003 7:15 AM

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?

Clint Ecker
July 24, 2003 8:37 AM

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

Adam Kalsey
July 24, 2003 8:43 AM

Jesper: If you use corner images that are transparent as Rich suggested, you can set the margins on the inside P tag to a negative value and push the text as far to the top as you'd like. Taranis: IE doesn't support alpha channel transparency without a really ugly hack. http://support.microsoft.com/default.aspx?scid=kb;en-us;Q294714 It's likely that we'll have full CSS3 support in browsers before IE supports alpha channels.

Ben
July 25, 2003 7:16 AM

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 :-)

Zach
July 25, 2003 1:24 PM

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

Why?
July 25, 2003 4:58 PM

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

Steven Jarvis
July 25, 2003 10:45 PM

Very nice. Works in Safari 1.0, too.

Julian Bond
July 26, 2003 8:47 AM

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

Adam Kalsey
July 26, 2003 10:00 AM

Yup. See the update at the end of the entry.

Mary Ellen, Doctor Science, MA
July 26, 2003 10:29 AM

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!

Stan Finley
July 26, 2003 10:14 PM

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.

Adam
July 28, 2003 10:51 AM

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.

Jesper
August 5, 2003 8:47 AM

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.

Bjoern
August 6, 2003 3:51 AM

As usual, Netscape destroys everything. Hate them.

Jamie Mackay
September 19, 2003 6:37 PM

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.

robert
September 26, 2003 7:21 PM

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.

Adam Kalsey
September 28, 2003 10:31 AM

As you note, height can be a pain, especially when the content you have overflows your desired height. You could try playing with the overflow properties, but without knowing what specifically you're trying to accomplish, that's about the only advice I have for you. I've used this method on two different menu bars on sites. Since there isn't much content in them, the effect is a fixed height and fluid width.

robert
September 30, 2003 12:52 PM

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.

Adam Kalsey
September 30, 2003 2:11 PM

I'd approach this a bit creatively and use a fixed-position div at the bottom of the page to contain your bottom corners and footer.

Rachel C
October 3, 2003 6:40 PM

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

Rachel C
October 3, 2003 6:42 PM

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

Mark DIdj
October 19, 2003 4:29 PM

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.

Chris
October 30, 2003 12:27 PM

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

Adam Kalsey
October 30, 2003 12:34 PM

Since the images have display: block set on them in the stylesheet, they become a block element and won't show up inline any more. That's why the text always appears below them. If you want to put text closer to the edge, try using a negative top margin on the inside text.

Sine
November 11, 2003 4:09 PM

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

Jay Jones
November 15, 2003 2:51 PM

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

Quadsk8
November 16, 2003 8:31 AM

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

rob d
November 16, 2003 10:38 PM

thnx for the tutorial..

michael
November 17, 2003 10:21 PM

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.

Kevin
December 5, 2003 8:34 AM

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

Justin Maxwell
December 5, 2003 12:03 PM

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

Shane Clements
July 27, 2004 3:13 PM

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

Adam Kalsey
July 27, 2004 4:36 PM

Shane, Looks an awful lot like Simon's... http://www.sitepoint.com/article/rounded-corners-css-javascript

Philip Tellis
August 5, 2004 2:43 AM

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;}

Freddie
August 13, 2004 1:51 AM

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.

Mary Johnson
September 20, 2004 2:23 PM

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.

Chris Andrews
October 8, 2004 11:03 AM

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

Trackback from HardGrok
October 13, 2004 3:39 PM

CSS rounded corner hack, part 2

Excerpt:

some guy
October 14, 2004 12:33 PM

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.

Kate
October 25, 2004 4:15 PM

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

Kyle Domingo
November 3, 2004 7:37 PM

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

AndyB
November 10, 2004 8:59 PM

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

mick
November 18, 2004 5:17 PM

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

Kristian
November 22, 2004 1:12 PM

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

Scott Brenner
December 16, 2004 2:31 PM

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?

Claus Larsen
January 4, 2005 6:55 AM

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

Eugene
January 4, 2005 11:31 PM

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

CurlyFro
January 7, 2005 11:37 PM

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

Sunnan
January 13, 2005 7:38 AM

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.

Dessi Bravo
January 16, 2005 4:10 PM

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?

Carl Dent
February 21, 2005 11:11 PM

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

Travis
February 22, 2005 7:48 AM

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?

nick
March 1, 2005 1:48 AM

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.

Nick
March 1, 2005 2:07 AM

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.

Tim G
March 3, 2005 6:55 PM

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.

bluzer
March 4, 2005 4:49 PM

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

Ron Wolpa
March 5, 2005 3:04 PM

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 )?

Eks
March 13, 2005 6:18 PM

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!

ECW
April 1, 2005 10:17 AM

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.

Neil Curry
April 12, 2005 3:09 AM

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

Joe
April 13, 2005 7:31 PM

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.

Slowpoke
April 26, 2005 1:18 PM

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.

Ryan Turner
May 6, 2005 10:48 AM

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

Ryan Turner
May 9, 2005 6:32 AM

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.

Piyukh Ranjan Das
May 23, 2005 3:52 AM

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.

Me, myself and I
May 25, 2005 4:21 AM

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

Chet
May 30, 2005 10:37 AM

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/

Chet
May 30, 2005 10:39 AM

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

Jason Walker
June 9, 2005 1:04 PM

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!

Wolfi
June 13, 2005 7:12 AM

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 :-(

Johhny Kage
June 30, 2005 3:22 PM

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?

Raquel
July 5, 2005 10:34 PM

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?

Timo
July 22, 2005 11:03 AM

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

mrtobo
August 22, 2005 1:56 PM

Thank you!

steph
August 30, 2005 7:13 AM

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

Johan DeSilva
September 16, 2005 1:27 AM

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

Jonathan Smith
September 25, 2005 4:27 AM

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

Adam Kalsey
September 25, 2005 5:11 PM

Nope, it's a problem with IE 5.5. The browser is over 5 years old, contains very limited support for modern web technologies, and has a number of significant bugs. Since my site is focused on Web technologies, the vast majority of my readers use modern web browsers so I'm not too concerned about problems in older browsers and do nothing to test or code around problems with them. If you'd like, you can get a newer browser for free from a number of places.... * IE from Microsoft at http://www.microsoft.com/windows/ie/downloads/default.mspx * Firefox from http://getfirefox.com/ * Opera from http://www.opera.com/ I'd recommend Firefox, if such a suggestion would be useful to you.

Ernest Salazar
September 27, 2005 10:28 AM

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.

Ernest Salazar
September 28, 2005 12:02 PM

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

Ernest Salazar
September 28, 2005 12:02 PM

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

Desi Rater
October 9, 2005 11:33 AM

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.

Bob
October 10, 2005 9:06 AM

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

JB Hansen
November 4, 2005 1:44 PM

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?

KC
November 25, 2005 1:44 AM

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

Tim
November 30, 2005 9:13 PM

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!

me
December 14, 2005 6:44 AM

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

alex
December 21, 2005 11:54 AM

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?

Corey Miller
December 23, 2005 3:21 PM

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.

Hookah
January 7, 2006 2:56 PM

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.

Stevie T (London, UK)
January 19, 2006 11:26 AM

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

Josh
January 23, 2006 10:48 AM

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

John Smith
January 23, 2006 3:01 PM

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?

Angel
January 28, 2006 12:12 PM

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

MC
January 28, 2006 12:46 PM

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

MC
January 28, 2006 12:53 PM

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

Rajen
February 3, 2006 7:53 PM

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

mck
February 5, 2006 3:44 PM

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

Andrew
February 8, 2006 3:09 PM

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.

Peter
February 10, 2006 2:07 AM

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

mike
February 10, 2006 2:39 AM

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; }

Sascha Stanscheit
February 15, 2006 3:39 PM

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.

AJ Silvers
February 16, 2006 5:07 PM

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

Mobicon
February 17, 2006 3:39 AM

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

nina aagaard
February 22, 2006 1:27 AM

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

marcas
February 22, 2006 4:52 PM

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

Aran
February 24, 2006 5:26 PM

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

Jason
February 25, 2006 1:45 PM

AWESOME! Works like a charm.

Jason
February 28, 2006 12:45 PM

Nina - Use absolute positioning.

BulletSeed
March 15, 2006 11:04 AM

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.

BooTCaT
March 25, 2006 6:18 PM

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

Marko Petkovic
March 31, 2006 4:10 PM

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

John Tulus
April 1, 2006 6:35 AM

Nice work

Peter Wauters
April 2, 2006 10:03 AM

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)

Peter Wauters
April 2, 2006 10:17 AM

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

AJ Wilhelm
April 14, 2006 2:47 AM

Smooth solution, thanks.

bs0d
April 15, 2006 9:01 PM

Nice job. I'll use this - thanks

Howard
April 17, 2006 3:33 PM

pretty cool

Anand
April 18, 2006 2:15 AM

Fantastic piece of work mate..

Michael Briggs
April 20, 2006 2:05 AM

Cheers mate, looks nice and elegant also.

khaiwong
April 20, 2006 1:23 PM

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

c quiec
April 21, 2006 12:53 PM

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

c quiec
April 23, 2006 12:59 AM

ok, it works. thnaks

Thomas
April 28, 2006 3:22 AM

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/

Thomas
April 28, 2006 3:24 AM

*img-tags.

nyka
April 28, 2006 12:27 PM

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/

Gwyn
April 30, 2006 3:21 PM

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

Antoine of MMM
May 2, 2006 2:55 PM

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.

Richc
May 4, 2006 6:10 AM

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.

Joe
May 4, 2006 12:40 PM

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

Lotus Zhou
May 23, 2006 1:43 PM

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

lance
May 30, 2006 5:41 PM

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

lance
May 30, 2006 7:02 PM

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

lance
May 30, 2006 7:19 PM

Got it

Joe
June 13, 2006 3:39 PM

Never mind...

choim
June 14, 2006 9:43 AM

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.

kk
June 16, 2006 11:17 AM

How to make gradient corners?

slim80
June 17, 2006 7:11 AM

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

Decipher
June 19, 2006 11:37 AM

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

hn
June 24, 2006 12:05 AM

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

Sean
June 29, 2006 8:37 AM

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?

Phil Smith
July 5, 2006 3:36 PM

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!

Rob Wood
July 9, 2006 3:57 AM

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

mark crooks
July 12, 2006 9:24 AM

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

pat
August 7, 2006 11:44 AM

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

zhengmin
August 11, 2006 11:01 AM

Please, Structure first!

a van weelden
August 14, 2006 5:10 AM

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 ?

Jonic
August 31, 2006 4:32 AM

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 :)

Tyson
September 2, 2006 4:15 AM

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.

SEOsnafu
September 17, 2006 2:51 PM

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

Vi
September 21, 2006 1:37 PM

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.

Erik
September 26, 2006 1:49 PM

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

Suxipo
September 28, 2006 2:54 PM

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?

MADchilis
October 4, 2006 2:51 AM

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

Harry
October 6, 2006 6:58 AM

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.

Andrew Chilton
October 20, 2006 1:21 AM

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!

Ash
October 20, 2006 2:55 AM

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.

Little Mutton
October 22, 2006 9:52 PM

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?

Rui Pinheiro
October 27, 2006 4:36 AM

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

Tony P
October 28, 2006 8:14 PM

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.

Thinkbasic
November 1, 2006 2:04 AM

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

Mandar Thosar
November 1, 2006 6:30 AM

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

JP
November 3, 2006 3:24 PM

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.

Darrell
November 9, 2006 4:49 AM

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?

Darrell
November 9, 2006 5:27 AM

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

Alan B
November 10, 2006 5:02 AM

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 ?

Phillip Hill
November 18, 2006 8:50 AM

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

Joel A. Burdick
November 18, 2006 3:33 PM

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

Joel
November 20, 2006 7:32 AM

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.

Felicia
November 23, 2006 9:35 PM

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

Jaime M Mendoza
November 24, 2006 7:50 PM

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.

André
November 29, 2006 10:45 AM

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

Arlan Dean
December 4, 2006 5:37 PM

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!

Keukens
December 8, 2006 12:25 AM

Definitely prefer this method to the JavaScript possibilities like nifty corners

Michael
January 16, 2007 3:24 PM

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

Eric Johnson
January 28, 2007 4:02 PM

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

HFdesign webdesign
February 2, 2007 3:14 AM

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.

Matt
February 2, 2007 9:20 PM

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

Matt
February 2, 2007 9:22 PM

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

Jim
February 2, 2007 10:58 PM

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.

Floris
February 7, 2007 5:53 AM

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

Der Klempner
February 26, 2007 10:51 AM

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

Aanmelden zoekmachines
March 12, 2007 2:07 AM

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 need help with something please
March 17, 2007 3:11 PM

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

Jamie Kehoe
March 26, 2007 7:36 AM

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.

Hodiho
March 29, 2007 5:28 PM

Very usefull Thanks a lot !

vuthcam
April 3, 2007 10:36 AM

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

Becca
April 3, 2007 8:41 PM

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

Jack H
April 5, 2007 4:21 AM

How do you make it with a white background?

Tim
April 12, 2007 5:07 PM

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?

Liza
April 19, 2007 2:32 PM

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

krishnan.s
April 25, 2007 5:05 AM

really it an good technique to get a rounded rect

Frucomerci
April 25, 2007 7:22 AM

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

greenpear
April 26, 2007 3:55 PM

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

sancou
April 27, 2007 4:50 AM

Very simple and very nice..thankyou very much.

uk_netzone
April 28, 2007 3:50 PM

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!

brian
May 1, 2007 6:41 AM

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

Aaron
May 2, 2007 8:06 AM

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!)

Susheel
May 7, 2007 6:09 AM

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

rochel
May 7, 2007 3:16 PM

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

megamoose
May 17, 2007 3:16 PM

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

Murat Isik
May 19, 2007 3:07 AM

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.

Karen
June 2, 2007 11:49 AM

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

Peter
June 22, 2007 7:39 AM

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

tiziana
June 23, 2007 4:55 AM

thanks i was looking for this :)

Noel
June 26, 2007 11:20 AM

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

Tim
July 3, 2007 10:19 AM

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

magori
July 9, 2007 5:53 AM

Brilliant Good tutorials !!Recommended for all begginers

Nick
July 21, 2007 4:38 PM

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

Christian Raquel
July 31, 2007 6:15 PM

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

Adam
August 2, 2007 1:43 PM

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

Tim
August 3, 2007 10:17 AM

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

Tim
August 3, 2007 10:26 AM

thoma
August 10, 2007 6:30 AM

Thanks very much.. This is really simple..

Swed
August 11, 2007 3:51 AM

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

Adam
August 17, 2007 6:57 AM

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

corgall
August 27, 2007 11:58 PM

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

Rounded Corners
September 12, 2007 12:35 AM

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

stefanie
September 14, 2007 11:57 PM

so helpful thank you!

Jaybuz
September 18, 2007 1:54 PM

Thanks for this.

Will
October 1, 2007 11:12 AM

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

Jason
October 9, 2007 10:57 AM

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.

Adam Kalsey
October 9, 2007 11:03 AM

This is a case of quite literally not thinking outside the box. You could always reverse the image and make the portion outside the box solid and the portion inside the box transparent. Then apply your gradient to the background of the box itself.

Jason
October 9, 2007 12:13 PM

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?

Bill
October 9, 2007 2:39 PM

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.

Bryce
October 10, 2007 7:23 AM

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

sarae.
October 15, 2007 2:23 AM

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 :)

matt smith
October 29, 2007 1:03 PM

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

mark
October 29, 2007 2:59 PM

great code!

brent
November 7, 2007 12:37 PM

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

Debbie
November 9, 2007 4:10 PM

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

Adam Kalsey
November 10, 2007 9:12 AM

To find how to create rounded corners in your favorite graphics tool, try searching for "*toolname* rounded rectangle" Here's a few samples... [Corel Draw](http://www.google.com/search?q=corel+draw+rounded+rectangle) [Photoshop](http://www.google.com/search?q=photoshop+rounded+rectangle) [Paint Shop Pro](http://www.google.com/search?q=paint shop pro+rounded+rectangle)

Sam
November 14, 2007 5:26 AM

You f****ing legend. :D

Mojo Jojo
November 14, 2007 3:37 PM

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.

Matt
November 16, 2007 2:22 AM

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.

Matt
November 16, 2007 2:22 AM

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.

Matt
November 16, 2007 3:02 AM

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!

Matthew Bagley
November 24, 2007 4:33 AM

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

bailey
November 30, 2007 2:12 AM

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

dave
December 3, 2007 7:56 AM

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; }

Coereo
December 6, 2007 6:38 AM

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

Rob
December 6, 2007 12:50 PM

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

Dima
December 8, 2007 4:22 AM

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

Rob
December 8, 2007 11:15 AM

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

Boo
December 17, 2007 2:36 PM

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

Steve Barker
December 19, 2007 5:52 PM

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

SirCommy
December 21, 2007 3:49 AM

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

Aaron
December 27, 2007 10:08 AM

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.

Tif
January 3, 2008 11:17 PM

Worked fine in my head.

amit
January 6, 2008 4:52 AM

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

Matthew
January 10, 2008 4:53 PM

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?

Michael
January 16, 2008 1:29 PM

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.

Kelly
January 21, 2008 1:15 PM

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

Kelly
January 21, 2008 6:57 PM

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.

Adam Kalsey
January 22, 2008 3:51 PM

Kelly: not at all. The top right designation works fine (you can see it in the demo on the page). Since that div contains only the image, the div is exactly as tall as the image. So top right or bottom right works fine.

wizualizacje
January 28, 2008 3:52 AM

That really works. Thanks.

The end
January 29, 2008 1:51 AM

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 :)

BlueBoden
February 4, 2008 1:24 AM

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.

Gheyssens Kristof
February 6, 2008 12:04 AM

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

Carlos
February 6, 2008 7:48 AM

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

Carlos
February 6, 2008 8:13 AM

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

Christine
February 14, 2008 4:31 PM

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!

Octane
February 19, 2008 10:59 AM

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

Thaddeus
February 19, 2008 8:36 PM

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.

Mike
February 24, 2008 12:50 PM

what if you want to have the corners transparent?

Eddie
March 14, 2008 4:43 PM

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

Maksudul Alam
March 17, 2008 8:34 AM

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

travis
March 19, 2008 3:02 PM

worked great for me, thanks!

Dave
March 20, 2008 9:18 AM

Worked great on all browsers!

Papito
March 27, 2008 4:43 AM

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

Paul
March 28, 2008 2:10 AM

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.

John
March 29, 2008 6:50 AM

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

like2program
April 3, 2008 4:30 AM

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

adi azar
April 5, 2008 1:29 PM

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

Joe
April 13, 2008 2:10 PM

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?

Michael S.
April 19, 2008 8:56 AM

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

Daniel Santos
April 30, 2008 9:39 AM

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)

jaycbrf4
May 1, 2008 9:01 AM

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

Adam Kalsey
May 1, 2008 9:14 AM

jaycbrf4: Sure it does. You'd just need to use an image with alpha transparency. A transparent PNG should work (older versions of IE can't handle transparent PNGs without some work on your part,though)

eli ego
May 4, 2008 11:58 PM

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

Sanjeev
May 6, 2008 11:43 AM

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.

padZtar
May 6, 2008 2:55 PM

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

i steal all
May 11, 2008 6:59 AM

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

Nadia
May 16, 2008 4:42 AM

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

James P
May 21, 2008 12:06 PM

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

Brian
May 21, 2008 4:27 PM

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.

Srdjan
May 23, 2008 11:46 AM

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

Kurt
May 27, 2008 12:44 AM

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

Sam
June 11, 2008 5:32 PM

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!

Stuart
June 28, 2008 9:20 PM

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!

dean
July 1, 2008 4:10 AM

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

Midnight Umbreon
July 14, 2008 6:16 PM

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?

Sarah
July 15, 2008 2:42 PM

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

Umar Bukhari
July 19, 2008 3:17 AM

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.

John
July 20, 2008 6:53 AM

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.

twoja stara
July 21, 2008 12:11 PM

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.

davidoff
July 24, 2008 7:36 AM

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

Nav
July 29, 2008 2:25 AM

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

ed
July 29, 2008 11:19 AM

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.

alan
August 8, 2008 2:48 PM

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

sa
August 17, 2008 8:48 AM

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

a
September 4, 2008 2:12 PM

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

Ken
September 8, 2008 6:06 AM

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

Bryant Weathers
September 8, 2008 4:03 PM

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.

Adam Kalsey
September 8, 2008 4:12 PM

Bryant: Only if your box is a fixed width.

Connie
September 8, 2008 9:05 PM

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.

John C
September 13, 2008 4:33 AM

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

Daniel F.
September 14, 2008 12:06 AM

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!

dora
September 24, 2008 7:28 AM

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

Nash
September 24, 2008 9:34 PM

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 .

Mike
October 1, 2008 5:24 AM

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

Hashim
October 2, 2008 9:04 AM

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 ?

Dumankaya
October 6, 2008 5:13 AM

i need also tail for it, like think bubble

alex
October 6, 2008 5:57 AM

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

brandon
October 8, 2008 3:53 AM

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

boofa
October 12, 2008 3:23 PM

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

graphics guy
October 21, 2008 10:47 AM

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.

Mr. Yank
October 30, 2008 2:47 AM

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!

bagavan
November 5, 2008 10:08 PM

Thanks for great tutorial.

sarah
November 6, 2008 6:50 AM

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.

STagmo
November 20, 2008 4:10 PM

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.

Dan
December 2, 2008 8:59 AM

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

adi azar
December 7, 2008 8:51 AM

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

mbazs
December 16, 2008 8:36 AM

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

benjaoming
December 17, 2008 3:27 PM

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.

David Larsson
December 22, 2008 8:40 PM

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/

David
January 8, 2009 8:50 PM

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?

David
January 8, 2009 8:51 PM

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

New Method
January 16, 2009 3:42 PM

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.

eegii
January 23, 2009 2:46 AM

IE 6.0 ?

Charlie
January 23, 2009 6:08 AM

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!?

TSwan
February 19, 2009 11:57 AM

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?

satelliteko.com
February 22, 2009 1:50 PM

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!

j
February 26, 2009 8:49 AM

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

whitsey
February 26, 2009 4:04 PM

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!

Nathan
March 10, 2009 6:52 AM

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.

Maarten
March 25, 2009 12:32 PM

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

Maarten
March 25, 2009 12:32 PM

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

QA
March 25, 2009 9:50 PM

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

Perdele
April 3, 2009 8:50 AM

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;

Adam Kalsey
April 3, 2009 9:39 AM

Perdele: That's not valid CSS. That won't work in any browser at all.

Stephen
April 6, 2009 12:43 PM

How would you do this with an outline?

Roxana Castañeda
April 21, 2009 12:16 PM

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

Yonas Teka
April 30, 2009 8:29 AM

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

Tim
May 15, 2009 8:52 AM

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? =(

Michael
May 17, 2009 6:50 PM

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

Warbo
June 8, 2009 1:41 PM

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.

Larry
June 16, 2009 10:53 PM

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.

Web Design Sussex
June 18, 2009 6:44 AM

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!?

Nick
June 18, 2009 8:08 AM

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

Keenan
June 21, 2009 1:53 AM

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.

farhan
June 22, 2009 11:31 PM

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

Mordy
June 25, 2009 12:38 AM

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.

red
July 6, 2009 1:15 AM

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

hasfa
July 19, 2009 1:04 AM

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

hasfa
July 19, 2009 1:04 AM

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

Godly
July 22, 2009 12:50 AM

Its a nice Coding thank you...

Some.Net(Guy)
July 22, 2009 10:02 PM

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.

This discussion has been closed.

Follow me on Twitter

Best Of

  • Customer reference questions. Sample questions to ask customer references when choosing a software vendor.
  • Simplified Form Errors One of the most frustrating experiences on the Web is filling out forms. When mistakes are made, the user is often left guessing what they need to correct. We've taken an approach that shows the user in no uncertain terms what needs to be fixed.
  • The importance of being good Starbucks is pulling CD burning stations from their stores. That says something interesting about their brand.
  • Google on the desktop Google picks up Picasa, giving them an important foothold on people's PCs.
  • Let it go Netscape 4 is six years old.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

Recently

Physical camera shutter for Cisco Spark Board (Jul 6)
A 3d printable design for a camera shutter for a Cisco Spark Board
My Travel Coffee Setup (Jan 20)
What my travel coffee brewing setup looks like, and how you can build your own for under $100.
Turkey Legs (May 30)
Product naming gone awry.
Speaking for Geeks: Your Slides (Dec 17)
Tips and tricks for creating great slides.
Speaking for Geeks: Writing Your Talk (Dec 14)
Don’t wait until the night before the talk to write it. Crazy, I know.
Speaking for Geeks: Tell a Story (Dec 13)
Telling a story keeps your presentation focused, keeps your audience interested, and makes it easier for you to remember your talk.
Speaking for Geeks: Where to speak (Dec 11)
You've got a great idea for a talk. How do you find conferences to submit it to?
Speaking for Geeks: Getting your session accepted (Dec 10)
Your conference speaking submissions are not getting accepted because they're bad. Here's how to make them better.

Subscribe to this site's feed.

Elsewhere

Tropo
Voice and communications platforms, including Tropo and Phono. Work.
SacStarts
The Sacramento technology startup community.
Pinewood Freak
Pinewood Derby tips and tricks

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

AIM or Skype: akalsey

Resume

PGP Key

©1999-2017 Adam Kalsey.
Content management by Movable Type.