Mobile Friendly Website

CSSPLAY

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

Post a comment


Current posts

confused:-
where are the 5 comments to read??? Very confusing ystem here.
(02.04.2005, 05:02)

Stu:-
?? where does it say 5 comments to read ??
(02.04.2005, 08:33)

Stu:-
Ah, I see the confusion. The [5] refers to the keyboard shortcut key No.5 not the number of comments.
(02.04.2005, 08:35)

call me al:-
Superb looking roundedness
will look into asap
u are the man :o)
(06.04.2005, 13:34)

Stu:-
call me al, more coming later today (now that Nifty Corners II has been published).
(06.04.2005, 14:34)

John:-
L(or)em ip(sum) work Stu. Thanks!
(15.04.2005, 15:03)

Mike:-
awesome
(19.04.2005, 23:00)

Joelle:-
I totally love these. However, I'm having some trouble getting the top and bottom border to be any other color than white. Can you help me out?
snappyhour@gmail.com Thanks!
(21.04.2005, 01:47)

Stu:-
Hi Joelle, If you look at the embeded style sheet you will see the color #fff mentioned in about five places. This is the border color white. Just replace these with your new color. BUT, you will find that this method works better with pastel colors. Bright color combinations will probably give a more jagged look to the corners.
(21.04.2005, 08:15)

Dan:-
Stu, im wondering if you could give me a pointer
i'm using a variation of you snazzy borders on my site http://members.westnet.com.au/freakmansion/
i am wondering if there's a way to add a drop shadow to the top border - i want that roladex (or however it's spelt) effect) im not asking for you to code it for me but could you point in a direction thats worth following please.
It'll make more sense if you look at it

thanks
(25.04.2005, 10:32)

Stu:-
Dan, it might be possible using a variation of the highlight effect I use in the 'snazzy border menu' (see the menus section).
(25.04.2005, 19:37)

JL:-
I like the look of your pages and their styling, but I have to say that the use of rounded corners inevitably makes boxes look heavier than they do with right-angled corners.
(28.04.2005, 14:30)

Ceasar San Smith:-
DO you just have demo's of these css tools or do you actually also give us tutorials on how to do them??
(11.05.2005, 13:30)

Stu:-
At the moment these are just demonstrations with the styling embeded in the source code. You can examine the code to see how it is done. I am busy writing tutorials at the moment some of which (6 so far) have been published on www.webreference.com
(11.05.2005, 15:29)

Tore Krudtaa:-
Mozilla challenge:

If someone have a fix please email me at:
krudtaa@yahoo.com

I modified this:
boxes/snazzy.html

Tested in firefox 1.0.4:
Put a table around the snazzy content with no fixed width and the use CTRL+ until table gets wider.
Then use CTRL- to make it narrower.
The table will not schrink, is there a workaround for this, and not by setting fixed width to table or cell.

code below:

<table border=0 cellpadding=0 cellspacing=0><tr><td>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>MozillaChallenge</h1>
<p>
Open in Firefox<br><br>
Use CTRL+ until it forces tablewidth to grow.<br><br>
Then use CTRL- to schrink, then you will notice that the table does not get narrower.<br><br>
Is there a workaround for this, but not by setting a fixed width to the table or tablecell or div?
</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</td></tr></table>
(12.05.2005, 11:47)

Dr Chesthair:-
Brilliant work Stu - love it to bits.
I've been looking for a way to have menus loaded as part of a CSS document so that if I need to remove a page and introduce another one, I can simply alter the CSS without having to opoen every damned page to alter a href. Any thoughts? it may not even be possible with CSS and may require another technique altogether, but if you can give any pointers (when you have time) I'd be very appreciative.
(17.05.2005, 07:12)

Zeerus:-
I found some display problems in IE, though I don't know which version ATM. When you scroll to the bottom of the page and then scroll up quickly part of the box disappears. It could just be my computer though
(18.05.2005, 17:58)

Zeerus:-
Dr Chesthair, the only way to change a link on every page without having to change each page manually is to use a CMS (Content Management System). One good one is Mamboserver (mamboserver.com), but there are other ones like WordPress (wordpress.org) and TextPattern (textpattern.com). As I haven't gotten around to testing the others I suggest using WordPress to start with.
(19.05.2005, 18:39)

DS2K3:-
Zeerus: - You dont need to use a CMS, a few lines of custom PHP, Perl, SSI etc. are more than enough for pulling a link or peice of html out a file and sub'ing it in
(31.05.2005, 21:27)

cromatic:-
Stu, I have a problem maybe in understanding of relations of divs positioning.
I discribe to make a build in your mind:
First a main div with absolute position and absolute width+height values.
In that div I wanted to use your header+container+footer example, but its not able to use like yours, so I modified it to my needs (this peace in a box).
Within the container I want to place a div.
So there are 2 divs I tested. The first produces no error but the second.
Where is the problem ? The footer loose his position and moved out of the main div.
...
Can't localize the error - if it is one - that makes the effect.
BTW I tested the css only on mozilla's firefox.
If you want to have an eye on it contact me under the following: merlon@gmx.net
and you will get the page+css in zip
(13.07.2005, 21:26)

cromatic:-
appending the msg above:
One of the two divs in the containe is the snazzy borers example that produces the error ...
(14.07.2005, 11:04)

cromatic:-
ehem ...
found the mistake
an unopened div
sorry for my crap above ;(
(18.07.2005, 21:22)

Michael W.:-
I think this is the best implementation of rounded edges in CSS that I've seen so far (and I've spent way too much time researching this on the web). I like it b/c it doesn't use images and it doesn't use javascript. Pure CSS. It's impressive. ---- A question: is it possible to have thicker, 2 pixel borders?
(20.07.2005, 04:20)

Nezmin2:-
Stu, is there a way to place a background in the boxes?
(30.12.2005, 21:03)

Valentin:-
Sry but it doesn't work with Internetexplorer..-.-
I tried for hours...
(05.01.2006, 02:25)

Stu:-
Valentin, it works in all browsers including IE5.01 (1px error), IE5.5 and IE6
(05.01.2006, 08:03)

Stu:-
Nezmin2, just put the background image in #xsnazzy and change the 'background:#d4d4d4' styles to 'background:transparent'.
(05.01.2006, 08:07)

Anderson:-
Hello Stu, I really admire your work and appreciate you sharing it with others. I am using your Snazzy borders for layouts in all my pages. All my pages contain rounded boxes (snazzy boxes), and lot of content with in it. Is there a way to fix the height of these snazzy box, so that it does not expand beyond view port and still be able to have other div's or Iframe with in the snazzy box ? thanks for your help.
(31.01.2006, 22:23)

Anderson:-
Some more info on the above post. Just to give you an idea, i have snazzy which should occupy complete view port. I want to have an Iframe with in this box, and should show be scrollable. I dont want to use the iframes vertical scroll bar and not its containers regular scroll bar. Is it possible? thanks.
(31.01.2006, 22:27)

Anderson:-
sorry i meant, i would like to use Iframe's vertical scroll bar and not it's containers scroll bar.
(31.01.2006, 22:28)

Blake:-
Great. I would love to use this snazzy borders as a wrap out side my 3colum layout. But seems when I mess with the css, I end up messing with the look.

HR
<div id="container">
<div id="content"></div>
<div id="leftcol"></div>
<div id="rightcol"></div>
<div id="banner"></div>
<div id="footer"></div>
</div>

HR

What is needed in the markup and css to make this work? I do not need markup for H1, p and so on. Just positioning and what actually makes the snazzy border.
(16.03.2006, 12:48)

Core Duo:-
Nice thouch with the new header!
I am trying to use your snazzy borders as an outerborder for my layout. Somehow it messes with the three colum based on holygrail. The layout is standard holygrail, except for an outerwrap to center the layout, where I have width: 80%. The <outwrap> is the first and last div in my markup. Then I try to put snazzy even outside that. It looks good in FF but not in IE.

How do I use the snazzyborders with a three colum? Maybe you could throw in a few comments in the markup and css?
(19.03.2006, 12:26)

Core Duo:-
What of the markup and css can I remove without from the snazzy without messing up the desired rounded corner look? Maybe it is just me, but sometimes it it hard to figure out others css.
(19.03.2006, 12:28)

DeadMeatGF:-
This looks great - I have only one question:
Can you put a snazzy box inside a snazzy box? I tried in IE7 and it broke the outer, bottom border :(
(20.03.2006, 11:43)

Stupido:-
I have also tried that DeadMeat. But without luck.
I have also struggled with using the snazzy box as an outside wrap container for a fluid 3 colum layout without any luck. I used this layout, css.maxdesign.com.au/floatutorial/tutorial0916.htm

Have anyone had luck using snazzybox as an outside container like this?

It must be me doing something wrong here, so please help me out.
(21.03.2006, 19:28)

DeadMeatGF:-
Thinking about it - the border "broke" like this: The edges did not stop at the curve, but went right the the bottom ...
Would judicious use of the margin property fix it?
Must give that a try ...
(23.03.2006, 16:20)

DeadMeatGF:-
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.
</div>
<b class="xbottom"><b ...
</div>
<p />
</div>
<b class="xbottom"><b...
</div>
works, but
</div>
<b class="xbottom"><b ...
</div>
</div>
<b class="xbottom"><b...
</div>
doesn't. In IE7 the latter gives a line (1em, I think) gap between the two curvy bottoms.
(23.03.2006, 20:47)

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

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

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

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

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

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

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

Scott:-
Stu: you really are a CSS master. I'm using snazzy borders on my site (renosite.com) 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)

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

Justin Adie:-
Hi Stu,
I'm having trouble getting the curved borders to work with IE7 and nested floats.
it works if i include a "spacer" div with clear:both.
it works if I include a height in the div containing the floats (even a percentage height),
but it does not work if I use the :after solution, which is by far the most elegant.
example can be seen at www.caeltgallery.no3.co.uk/Untitled-1.html

i'd be very grateful for your guidance on what i'm doing wrong!!

thanks
Justin
(04.08.2006, 10:59)

Justin Adie:-
Please ignore my earlier post. i was young and confused in my earlier post and had forgotten that IE of course does not acknowledge the pseudo class.
(04.08.2006, 21:57)

Nora:-
Stu - or anyone,

I've posted on the main board before, thanks so much for your help there.

I'm trying to recreate your snazzy border here but having trouble because my border is dashed. This, of course, causes problems because of the way the top and bottom border are displayed (as a background).

Could you please help me out with that? Thanks a lot.
(22.08.2006, 16:03)

Nora:-
Never mind - I figured it out. Thanks for the technique, though, Stu!
(23.08.2006, 14:45)

Fahed:-
Hey Stu,

I searched all over to find a solution which allows for a curved *border* as opposed to (or in addition to) a cruved *corner* and your's does the trick very well in both instances.

One question... how would one go about making the entire border thicker (e.g. 2px)?

One suggestion... it took me a really long time to get the technique into my thick/overworked skull. Maybe it might be worth adding some kind of imagery to the explanation for a fast and appreciative understanding of how it works.
(21.09.2006, 13:46)

Spectre:-
Sorry if I'm missing something, but if you set the background color in .xsnazzy to something other than transparent, you will see this color bleed over the rounded corners...
(27.09.2006, 20:09)

Stu:-
Spectre, .xsnazzy is just the containing div that holds it all together. This should be set to transparent so that any 'outside' color occupies the outside of the rounded corners.
The background color of the rounded corner box is set using the .xboxcontent and the .xb1 to .xb4
(27.09.2006, 20:35)

khangtoh:-
Stu,

I'm getting a transparent line when I use <ul><li> in the content box. Any idea how to resolve this?

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent" id="errorExplanation"><h2>2 errors prohibited this user from being saved</h2><p>There were problems with the following fields:</p><ul><li>Password is too short (minimum is 5 characters)</li><li>Password can't be blank</li></ul></div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
(13.10.2006, 07:07)

Stu:-
khangtoh, any gaps are normally due to default paddings of margins or the enclosed elements.
Try setting the style od the <ul> to padding-top:0; padding-bottom:0; margin-top:0; margin:bottom:0;}
(13.10.2006, 08:31)

Khang Toh:-
Hi stu
I would appreciate if you can try this out.. Many thanks!

.xboxcontent ul li {padding: 0}

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent" id="errorExplanation"><ul><li>Password is too short (minimum is 5 characters)</li><li>Password can't be blank</li></ul></div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
(14.10.2006, 19:48)

Stu:-
Khang Toh, as I said in my previous reply try:
.xboxcontent ul {margin-bottom: 0; margin-top:0; }
(14.10.2006, 20:11)

Kalyan:-
hi stu
i am trying to use this method
but for sometimes the snazzy box appears broken
i.e the border doesnot appear contineous and smooth
why do you think this happens
(20.10.2006, 10:05)

Chris:-
Hello Stu,

First of all, congrats! You are a very talented person with an awesome site! :)

I'd like to know if I can have two (or more) snazzy boxes on my site, with different background color (for each one).

I have tried to create a css clone of the original xsnazzy.css by changing its name, colors and all other attributes referring to xsnazzy.css, but all the snazzy boxes in my site keep "listening" to the original xsnazzy.css.

What am I doing wrong? Thanks for any help you can provide.

Keep up the good work! :)
(22.10.2006, 21:37)

Chris:-
It's me, Chris again. When I was writing about "snazzy boxes" above, I was referring to the "Snazzy Borders"-just to avoid any misunderstanding. Thanks.
(22.10.2006, 21:44)

Stu:-
Chris, there are two examples of how to have more than one snazzy box on the same page www.cssplay.co.uk/boxes/snazzy2.html and
www.cssplay.co.uk/boxes/krazy.html
(22.10.2006, 22:19)

Jeff:-
Stu - Great site and great solution for rounded corners!

I'm trying to put a small image inside of a snazzy borders box containing text. I've made the background of the box change colors with the :hover tag, and everything looks great. The whole box is set up to be a link so that you can click anywhere in the box.

The strange thing is, in Firefox this works without a problem, but in IE it only works if you click in the box or on text in the box. Clicking on the image enclosed in the box does nothing.

Any ideas on why this would happen?
(13.11.2006, 04:02)

Daniel:-
I'm trying to use the .inset from krazy korners for boxes on my page layout. Anyone tried nesting one curved box inside another? It hasn't worked for me yet. I'll keep trying but if anyone has this working let me know please
(10.01.2007, 03:02)

Ryan:-
Hi Stu, great piece of code.
I have put it onto my site but have one small problem that i can't see answered elsewhere.

Is it possible to have the div auto size depending on the content. At the moment it stretches the whole width of the div (content div) that it is in.

i.e:
|------------------------|
|content is here |
|content |
|more content is here |
|------------------------|

instead of:

|---------------------------------------------|
|content is here |
|content |
|more content is here |
|---------------------------------------------|

(dotted lines being borders)

hope that makes sense. Would prefere it to auto size ratherthan specify size as i want to have multiple sized boxes. But, a bit stuck atm
(07.05.2007, 23:18)

Ryan:-
comment system remvoed extra spaces the | shoudl all line up at very end to create a box
(07.05.2007, 23:19)

Ryan:-
Hmm it seems it auto sizes to the div in which it is in. So i just put a fixed width div around it and it is sorted :)
(08.05.2007, 10:04)

Adam D:-
I've just set up this code on my personal site (www.dinwoodie.org, 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)

Aaron:-
I've used Snazzy Borders for the animated word balloons on my game site: www.gamesocks.com - 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)

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

Roelf:-
Sorry this should be:

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

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

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

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

Stephen:-
Hello,
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">
<fieldset>
<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" />
</fieldset>
</form>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

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)

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

Stephen:-
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.

Thanks!

Cheers!
(11.03.2008, 15:40)

Stephen Waddock:-
Stu,

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 css....it works but, the right side column rounded top will does not meet the right edge...by approx 15 px
(02.04.2009, 20:27)



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