Mobile Friendly Website

CSSPLAY

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}cssplay.co.uk.

Post a comment


Current posts

idigital:-
That has to be the easiest way to do a cross browser box with transparent corners yet! :)
(10.05.2004, 12:19)

anonymous:-
Doesn't work when I change the font size in the View menu in Firefox (0.8 nightly build).

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a) Gecko/20040505 Firefox/0.8.0+ (djeter)
(12.05.2004, 01:48)

Stu:-
No, your quite right, it doesn't. But if the sizing was changed to ems then it would work.
(12.05.2004, 11:29)

Alex (a different one):-
Works fine in IE, although in firefox for windows, if you highlight the bullets with your mouse it inverts and does not invert back. Safari on the mac is totally whacked out. This was a good attempt, but sticking to a curve (transparent mask) image may be safer for the interim.
(19.08.2004, 21:07)

Dustin:-
Is there any way to make this thing resize? I've been trying for over an hour but cannot do it.
(02.01.2005, 07:17)

Stu:-
It can be done but it's not easy. If you want to resize then this is not the way.
(02.01.2005, 08:53)

crappy:-
well i think its bloody amazing these curved corners i love curved corners but can't seem to find the script on here for them and really want to learn them becuase there soo pretty. any help email adam_coller@hotmail.com nice site stu
(03.02.2005, 19:54)

Stu:-
The css for these curved corners is in the source code. However, this method is not the best way to do it (just a different).
(03.02.2005, 20:38)

Starlight:-
Is this a bit simpler? http://pro.html.it/esempio/nifty/
It just seems like less typing to me, although it may be the same general idea.
(22.03.2005, 16:13)

Stu:-
Hi Starlight, nifty corners uses javascript and as I don't allow javascript in any of my examples I would not use that method. There are other ways to do this with css as can be seen in my fitted doors menus.
(22.03.2005, 17:59)

IslandGirl:-
I've been having fun making it different sizes (width and height), and adding a box at the top for a heading. You just need to adjust some of the positioning.

It even plays nice in IE 6, NN 7.1, Opera, FF and Mozilla when you place it in a column. I tested it in a previously existing 3 column layout and there were no problems.

Way cool!
(25.04.2005, 14:25)

greg:-
Hi Stu,

Love your idea of using curved boxes without the use of images. However, I'm really stuck working out your code. I want the curved boxes to appear only on a:hover. Here is my code for the XHTML and the CSS.

Hope you can help as I'm really stuck

Thanks

Greg

/***START CSS***/

#nav2area a {
display:block;
padding:3px 4px;
width:120px;
text-decoration:none;
}

a:link {
color:white;
width:120px;
}

a:hover {
color:#666;
background:white;
}

/***END CSS***/

<!--START XHTML-->

<div id="nav2area">
<a href="XXX">ACAS</a>
<a href="XXX">AMREF</a>
<a href="XXX">AZO</a>
<a href="XXX">BBC WORLD SERVICE</a>
<a href="XXX">BUAV</a>
<a href="XXX">CHILDLINE</a>
<a href="XXX">CITY UNIVERSITY</a>
<a href="XXX">CRUISAID</a>
<a href="XXX">GREENPEACE</a>
<a href="XXX">HOME-START</a>
<a href="XXX">HORNIMAN</a>
<a href="XXX">KEW GARDENS</a>
<a href="XXX">OPTIONS</a>
<a href="XXX">SWATCH</a>
<a href="XXX">TEACHER SUPPORT NETWORK</a>
<a href="XXX">V1</a>
</div>

<!--END XHTML-->
(26.04.2005, 12:46)

Dave:-
Thanks, it works great.
(26.04.2005, 20:51)

amygdela:-
WOW, I'm amazed! :-)
(11.05.2005, 11:38)

Trisha:-
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. trisha.watts@insightbb.com
(13.05.2005, 06:19)

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

Stu:-
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 www.extraconnections.co.uk if you want to get in touch.
(17.06.2005, 11:08)

Raynald:-
Hello,
it doesn't work on my Minux (Ubuntu system) Firefox, and I don't know why... Maybe it's my configuration, but not sure : http://raynald.ouvaton.org/special/Capture-4.png
Great job, thanks for sharing it!
(18.08.2005, 01:50)

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

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

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

Raynald:-
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 : http://raynald.ouvaton.org/special/Capture.png. Thanks for your answers.
(01.09.2005, 01:50)

Anonym:-
stu have u noticed what happens when the bull was dragged?
(10.09.2005, 02:33)

jeipi:-
stu, great work.
Have u noticed what happens when the bullet was dragged?
(10.09.2005, 02:34)

yaniv:-
hi

how can i use the scripts if i don't see the code?

thanks
(28.02.2006, 03:44)

Mike:-
where beginners like me can see the css and html for this ? And the explanations to implement it ? And the question is good for all the rest of your site (layouts, menus, boxes, demos, etc...
(19.03.2006, 18:55)

Stu:-
Mike, to understand css you must first understand how it can be implemented on a page. Most of my examples (as I keep telling visitors) have the css in the usual place in the source code. The (x)html is held in the #info div. Just check the source code to find what you are after.
A few of my examples have tutorials available. Some require a good knowledge of css before you will be able to understand but most will be easy to follow if you have a fair understanding of css. The best way is to get an understanding of the basics from a good book then experiment with my code to see how things work. If I were to write tutorials on my work there would only be half the demonstrations on this site. After all this is 'cutting edge' css ;o)
(19.03.2006, 19:25)

Mike:-
What you say in fact is the only thing I have to do is looking at the page source code. For example, for the curvy corners, I go on the page where is the demo and look at it's source code. Am I right ? Same thing for your layouts, menus and so forth...right?
(20.03.2006, 15:48)

Stu:-
Mike, that's right. Most of the examples have the css and the (x)html in the page source code. A few have the css loaded using the normal method so from this you can get the css file name. entering this name in the browser will give a screen showing the external css file.
(20.03.2006, 19:46)

Mike:-
Stu, thanks for your help...From Canada !

Honestly, I've never seen a nice website like yours about css !!!
(20.03.2006, 21:32)

Mark:-
Hi Stu,

I very much enjoyed this website. Also I just visited your page with the example of a box with rounded corners: www.cssplay.co.uk/boxes/curves.html

This example works very well in MS Explorer 6.0 and Opera 8.54, but doesn't do to well in the latest Firefox (version 1.583)

Maybe you could check out the code to make it crossbrowser-compliant again. Have a great week!!

Greetings from Belgium, Mark
(16.05.2006, 19:04)

Charlotte Payan-Salcedo:-
how do you down load the style sheet???
(20.08.2006, 21:14)

Charlotte Payan-Salcedo:-
i know that you get the css code from the source code but for some reason im not grabbing the right code. could you mabe highlight it in an example source code?
(20.08.2006, 21:17)

charlotte payan-salcedo:-
is anyone ot there?
(20.08.2006, 21:19)

Robert:-
Hi Stu

I would like to use the rounded corners as box tops, but I am having difficulty getting the box to move to the required position? Can these be used for this?

I know that I can use gifs to do this but your method is awesome so I would like to try and use it

Regards

Robert
(25.10.2006, 14:43)

Dave Haygarth:-
Hi Stu

I'm pretty new to CSS, but got the hang of this one (thanks to your discussion with Mike). This is truly great stuff - very impressed. Thank you and well done.
(23.11.2006, 09:15)

Alex:-
I'd like to inform you that these curves do not work at all in Opera 9.02. Your site states that it works in all modern browsers. I'd say all except Opera 9. The latest firefox renders this effect properly (1.5.0.8 and 2.0 beta)

I'd like to thank you for a very insightful website and even though I'm quite experienced with HTML and CSS your site is VERY helpful for me and I hope you'll continue your work on this site and bring more new stuff in.
(26.11.2006, 18:23)

Stu:-
Alex, I have Opera 9.02 and these corners work just fine.
(26.11.2006, 19:09)

Glenn:-
OK, this looks really nice, but it needs waaaaaaaaaaaaay more explanation.
(02.03.2007, 09:52)

Sancou:-
Very nifty. Thanks.
(02.05.2007, 09:07)

Zany_:-
I must say i'm really blown away by the simplicity of this type of coding... thx so so much for sharing this work of art with the rest of us :)

Btw... i'm looking for a method to stop from showing those quadrants of a bullet when you select all content (Ctrl+a).

P.S. I'd like your permission to use this technique in my future site (still in development)... "what say you?" :P
(07.05.2007, 14:44)

Mikey:-
Hi Stu - thanks for your great efforts. I'm having trouble positioning the curved corner box on the page. It seems to default to 'center' and I've tried the variables in the CSS and I can't make it align/float 'top left' of 'top right'. Please let me know what I'm missing.
(05.06.2007, 09:29)

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

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

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

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

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

Jim:-
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: firmstep-dev@jimmed.net
(15.01.2010, 14:29)

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

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



Post

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://'

Support CSSPLAY

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.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page