Mobile Friendly Website


Doing it with style

Curved corners COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Very nice, but doesn't work with Firefox on Linux...
(22.06.2007, 10:47)

found the same on ubuntu linux with forefox 2. breaks apart.
(28.08.2007, 14:21)

You emblazen your site (made up mostly of other people's work) with adverts on every corner and then you have the cheek to ask for a donation aswell.
(07.03.2008, 07:11)

Very nice examples. Thank you very much.
(20.03.2008, 19:50)

Alex C.:-
I have found that the curves don't work in firefox in linux ( specifically Ubuntu ). However, since I wanted to use this in my current project, I needed to fix it for linux. I always consider linux in my projects. I have found that using a font-family of Helvetica makes the curves work in linux Firefox as well as windows Firefox and IE.
(15.11.2008, 23:18)

Absolutely wonderful! The best thing about this is that you can control which corners are rounded and which are not by setting visibility:hidden; on the corners you don't want rounded. Seamless through IE and FF on PC and Mac, and even in that insufferable piece of code that Apple calls Safari. The wonders of Stu never cease!
(21.04.2009, 18:36)

Graham Smith:-
This looks nice and I've copied the css exactly, but it's not working.

Does it rely on the main div (the one that looks like it has curved corners) to have position: relative?

To all those wondering about the code I can highly recommend you work in FireFox and add-on FireBug.

Then just right click any element on the page you want to work out and select "inspect element". It'll show you the html and css at the foot of your browser. But the amazing thing is you can edit and delete css so you can what each property does.
(08.08.2009, 15:06)

Hi Stu, I love the concept here. I'm currently in the process of adapting this method to support any size of corner, but I'm having difficulty working out the scaling.

I've tried using the 'em' sizes posted by another keen user above, all to no avail.

Do you have any information that might help?

Contact me:
(15.01.2010, 14:29)

Hi Stu,
I am trying to use your flyout menus next to a curved corner section. In FF3 and IE8 everything is fine, but in older IE's the menu goes behind the section, and you cannot see the menu items.

By removing "position: relative" it works, but all the corners go to the wrong place, so that's no good!

Z-index doesn't appear to make any difference either.

Any thoughts would be hugely appreciated.
(20.05.2010, 19:46)

Typical - I post a comment and then find the answer minutes later.

I needed z-index set and position: relative on the menu. I'm not sure I totally understand the significance, but time to move on...

Sorry to bother you.
(20.05.2010, 20:37)

10 of 54 comments (part 1). [ » ] [ * ]


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page