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

stu, can you email me a page with just the code for the curved corners and the CSS needed for it? I just am not sure what I need to do.
(13.05.2005, 06:19)

Trisha, do you want 'bullet' corners or 'snazzy corners'? I would not recommend 'bullet corners for any serious use but snazzy corners are ok.
(13.05.2005, 08:07)

Chris Hunt:-
I've reworked your curved corner CSS to use ems , so that you can re-size the box. It's still a pixel out here and there, but good enough. Judicious use of negative margins also mean that the main boxes no longer need to be a fixed height or width. Here it is:

.curvy {position:relative; background:#89a; color:#000; margin:5em 0;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:.133em; height:.133em; color:#89a; background:#fff;overflow:hidden;z-index: 1;font-size:150px; font-family:arial;}
#ctl {top:0px; left:0px;}
#cbl {top:100%; left:0px; margin-top:-.133em;}
#ctr {top:0px; left:100%; margin-left:-.133em;}
#cbr {top:100%; left:100%; margin-top:-.133em;margin-left: -.133em;}
#quadtl, #quadtr, #quadbl, #quadbr {position:absolute; color:#89a;line-height:.266em;z-index: 1;}
#quadtl {left:-0.053em;}
#quadtr {left:-0.166em;}
#quadbl {left:-0.053em; top:-0.113em;}
#quadbr {left:-0.166em; top:-0.113em;}
#txt {margin-top:0.033em; margin-left:0.033em; padding: 0.5em; color:#eef; z-index: 2; position:relative;}
(14.06.2005, 10:19)

Chris, that must have taken some time. I will take a look at it.
(14.06.2005, 17:30)

Chris Hunt:-
Well, not as long as I should have spent - You set the font size to 150px, so you can convert all the pixel dimensions to ems by dividing them by 150. As I said, it's a pixel out here and there, so the em figures probably need nudging up and down a bit - but that WOULD have taken time. Contact me through if you want to get in touch.
(17.06.2005, 11:08)

it doesn't work on my Minux (Ubuntu system) Firefox, and I don't know why... Maybe it's my configuration, but not sure :
Great job, thanks for sharing it!
(18.08.2005, 01:50)

Raynald, it is probably due to your font set up and my pixel sizing. Perhaps it would work if you used the em conversion buy Chris Hunt (a few posts back).
(18.08.2005, 07:52)

Tried it but no way. I'll ask some Ubuntu specialist, this is very strange... I'll tell you.
(18.08.2005, 09:20)

Raynald, do you have Arial font on your system?
(20.08.2005, 12:33)

Hey, I'm sorry that I'm answering late. I didn't have the Arial font by default on my system, so your curved box didn't work. Now I have this font and your curved box look great : Thanks for your answers.
(01.09.2005, 01:50)

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


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