***P*X*L*8*** [Using CSS 'border' Attribute with the Body Tag]

Using CSS 'border' Attribute with the Body Tag

This idea came to me the other day: why not apply the CSS 'border' attribute to the body tag?

So I began to play around and I found I could get some really cool effects like simulating the look of a frameset or iframe.

Granted, the styles display differently in each browser and platform (I like the results in IE 5.5+ Win best). The dotted border in style 3 shows as solid in IE. And in IE Win, the scrollbar moves to follow the inner edge of the border, creating that iframe look. But overall, regardless of the inconsistencies, 'border' provides an easy way to produce some dramatic visual effects.

Use the buttons below to change the styles.

body 
{
border:5em #ccc outset;
padding:30px;
scrollbar-face-color:#cc6;
scrollbar-track-color:#cc9;
scrollbar-arrow-color:#669;
background-color:#669;
margin:0px
}

h2 
{
color:#cc9;
font-family:"sans-serif";
font-size:14px
}

p 
{
color:#fff;
font-family:"sans-serif";
font-size:12px
}
pre 
{
color:#fff
}

body 
{
border:8em  groove;
background-color:#996;
padding:30px;
margin:0px
}

h2 
{
color:#cc9;
font-family:"sans-serif";
font-size:14px
}

p 
{
color:#fff;
font-family:"sans-serif";
font-size:12px
}

body 
{
border-top:100px #669 dotted;
border-bottom:100px #669 dotted;
padding:40px;
scrollbar-face-color:#99c;
scrollbar-track-color:#ccc;
scrollbar-arrow-color:#cc0;
background-color:#cc6;
margin:0px
}

h2 
{
color:#669;
font-family:"sans-serif";
font-size:14px
}

p 
{
font-family:"sans-serif";
font-size:12px
}