Mobile Friendly Website


Doing it with style

BOXESSnazzy Borders using just CSS

Date : Pre 2007

For all browsers

Snazzy Borders

Based on Nifty Corners By Alessandro Fulciniti

Rounded borders without images

Jelly apple pie cake marzipan. Wafer cake jelly beans apple cake danish carrot cake. Dessert pudding chocolate cake apple pie chocolate roll cupcake jelly. Macaroon chocolate cake sesame snaps sweet cookie biscuit. Tart sesame snaps wafer croissant brownie marshmallow toffee.

Icing apple pie chocolate bar ice cream macaroon liquorice bear claw. Pudding brownie marshmallow biscuit muffin wafer. Tiramisu carrot cake cupcake muffin ice cream lemon drops dessert topping. Wafer carrot cake pudding topping brownie. Macaroon wafer apple pie sesame snaps lollipop chocolate.


Having seen Alessandro Fulciniti's excellent tutorial on Nifty Corners, I thought that it should be possible to have Nifty Corners AND Snazzy Borders.

So here it is. No images and fixed or fluid as required. Just change the colours as you wish and put snazzy borders on your nifty corners.

Now works in IE5.5 and just 1px out (try spotting it) in IE5.01

Cascading Style Sheet

/* for understanding browsers */
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:25px 1em 100px 1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.


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