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

Adam D:-
I've just set up this code on my personal site (, still very much lacking in content, but now with snazzy borders!) but I'm having one problem--for some reason, it all goes a bit strange around <a> tags in IE (it's probably easier to see for yourself than explain). I'll be damned if I can work out why, as I haven't touched those in the CSS, so it seems rather bizzare to me.
(21.05.2007, 03:04)

I've used Snazzy Borders for the animated word balloons on my game site: - to great effect. Thanks Stu!

One thing I noticed is that in IE (6 and 7) the width must be specified (or forced upon the div) or it gets messed up. Firefox and Safari seem to do all right with auto widths or max/min widths.

Thanks again!
(20.08.2007, 17:00)

Hi, thanks for all the work. I just found that printing the snazzy box leaves out the top and bottom border. This is due to:

.xb1 {margin:0 5px; ackground: #08c;}

So I changed it to:

.xb1 {margin:0 5px; border-top: 1px solid #08c;}

Which works well in IE6 but not in Firefox (the border is visibly bigger), so then I tried:

.xb1 {margin:0 5px; border-top: 1px thin solid #08c;}

This works in Firefox although the error console complains about it.

Any alternatives?
(20.09.2007, 09:27)

Sorry this should be:

.xb1 {margin:0 5px; background: #08c;}

Left out a "b".
(20.09.2007, 09:28)

Sorry, as I typed this I realized my boo boo, it should be:

.xb1 {margin:0 5px; border-top: 1px #08c;}

Now it works well in IE6 and Firefox
(20.09.2007, 09:31)

To my dismay, my method still doesn't print out properly, not sure if our BW laser doesn't have the resolution to print it.
(20.09.2007, 09:40)

Has anybody tried putting a form element into this box? On IE7, it blows out the top and bottom margins.

Use this HTML:
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">

<form method="post" action="#" name="searchForm" id="searchForm">
<legend>Search Site</legend>
<label for="searchKeywords">Enter Keywords</label>
<input type="text" id="searchKeywords" name="searchKeywords" class="searchfield" />
<input type="submit" name="Search" value="Search" class="searchbutton" />
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

Add these lines to the existing xsnazzy CSS:
#searchForm legend {
display: none;

#searchForm label {
display: none;

#searchForm fieldset {
border: none;
(10.03.2008, 20:17)

I think that all you need to do is style the form margins.
form {margin:0;}
(10.03.2008, 20:52)

Hi Stu,
Thanks for the quick reply. I keep forgetting that forms have natural margin and padding. I need to apply a "CSS reset" style sheet. Such a silly oversight on my part...

I applied "form { margin: 0; padding: 0}" and that worked.


(11.03.2008, 15:40)

Stephen Waddock:-

Love the borders! Question for you. If I wish to use this with two container side by side and set the width of each container in the code, rather than in the works but, the right side column rounded top will does not meet the right approx 15 px
(02.04.2009, 20:27)

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