Comments on: Reusable Transparent CSS Rounded Corners

By: Brad Parks

Brad Parks — Wed, 24 Feb 2010 20:15:33 +0000

Hey… nice technique! thanks a ton for sharing it…. i love how the color/bg can bleed through…. i guess it always helps to *flip* the thinking on things, eh? Great work!

By: Karate Corners: XHTML/CSS Rounded Corners / Kyle Schaeffer's Web Design Blog

Karate Corners: XHTML/CSS Rounded Corners / Kyle Schaeffer's Web Design Blog — Sat, 30 Jan 2010 23:20:55 +0000

[...] Update: Read a even more advanced version of this technique in an even newer tutorial! [...]

By: IE Corner Inserts via jQuery / Kyle Schaeffer's Web Design Blog

IE Corner Inserts via jQuery / Kyle Schaeffer's Web Design Blog — Thu, 28 Jan 2010 22:58:07 +0000

[...] but my script will handle inserting the HTML and CSS in the right place. If you create the images a little like this, then you’ll find that your IE corners will be in place in no time at [...]

By: Kyle

Kyle — Tue, 20 Oct 2009 13:41:20 +0000

Stefano, thanks for that great CSS tip to fix the corners for IE6. Generally, I’ll add a script that creates these corners for IE7+ users only (other browsers can use the much more performant “border-radius” property), and IE6 users will simply see the sharp edges of the box, but your fix is a good option as well!

By: Stefano Guglielmi

Stefano Guglielmi — Tue, 20 Oct 2009 09:47:13 +0000

thank for the trick, but to use it for ie6 you have to fix the css whit this properties:

.box{
*display:inline-block;
clear:both;
}
.corner{
overflow: hidden;
}

and use pixel for the background-position of the corners.

By: Alfredo

Alfredo — Mon, 12 Oct 2009 12:22:54 +0000

Exelent article!

there is too a little javascript library that promise to round your corners called curvicorners (http://www.curvycorners.net/) that round ie and opera corners. while in browser that suppor rounded corner this library use border-radius property.

By: ailaic

ailaic — Sun, 11 Oct 2009 00:11:38 +0000

That’s good for very simple boxes.

There’s a great Dreamweaver extension called FlexiPanelsCSS that handles complex graphic css boxes and it’s quite easy to use (don’t want you to think I’m making them publicity, but the app is very very good ).

By: Ryan Roberts

Ryan Roberts — Sat, 10 Oct 2009 15:03:49 +0000

I’ve been using a technique similar to this for a wee while now, but you’re article made me think… why not insert the 4 round corner divs using Javascript and style with CSS as normal? jQuery could easily and unobtrusively do this, that way you keep the HTML much cleaner moving the largely non-essential styling into Javascript. Also Firefox and Safari already handle border radius through CSS so you could put the Javascript into a conditional comment so only IE get’s this approach.