Mobile Friendly Website


Doing it with style

Snazzy borders 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

Did Stu change the code?
It works now, nested is fine!
You *must* have something separating the </div>'s after the bottom line - i.e.
<b class="xbottom"><b ...
<p />
<b class="xbottom"><b...
works, but
<b class="xbottom"><b ...
<b class="xbottom"><b...
doesn't. In IE7 the latter gives a line (1em, I think) gap between the two curvy bottoms.
(23.03.2006, 20:47)

Drat - in the above post, read the hyphens as newlines ...
(23.03.2006, 20:48)

DeadMeatGF, It is all to do with the top and bottom padding of the first and last lines of text. If you look at the example (and on Krazy Korners) the <p> padding is set to avoid having gaps between the vetical borders and the curved corners.
(23.03.2006, 20:53)

Can anybody post some html with css embedded to show me a real world site where znazzy within a snazzy side is in use? I have played with this for
a week now without luck.

Deadmeat, can you show me what you have done? I am working with a two colum layout in css. And I would like to use znazzy borders for right colum, content colum and also in my main wrap div.

Any and all help recieved with gratitude.
(29.03.2006, 08:30)

I was gonna post a link to a site to show what I try to achieve, but I guess links a re not permitted here.
(29.03.2006, 08:32)

Can you explain why all the classes are in <b></b> statements?

I see how the 'lines' of the curves are made - but i dont understant the use of the Bold tag, nor how these resize to the correct dimensions - any help for a slow learner, greatly appreciated.
(29.05.2006, 22:16)

GreenBoy, I had to use a tag to hold the 'lines' of the curves so I chose <b> because it is an inline style, it is quick to type and uses less file space. I could have used <span> or <em>. Using display:block gives them a width of 100% and margin:0 5px (for instance) centers them with a right and left margin of 5px. So they expand to fit the width and maintain a fixed left and right margin. The border is then used to produce the curve.
(29.05.2006, 22:35)

Thanks Stu - that is so much clearer now - focusing too much on the <b> tag to get past it!
thanks again.
(30.05.2006, 08:44)

Stu: you really are a CSS master. I'm using snazzy borders on my site ( and I having trouble. How do I put a snazzy box inside another snazzy box? Any help would be greatly appreciated.
(30.07.2006, 04:58)

Scott, have a look at the 'next' demo which shows snazzy boxes inside a snazzy box.
(31.07.2006, 18:03)

10 of 76 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