bodyの四隅にグラデーションのボーダーを表示させる方法[CSS]

XHTML

<div class="edge" id="left"></div>
<div class="edge" id="right"></div>
<div class="edge" id="top"></div>
<div class="edge" id="bottom"></div>

CSS

#top, #bottom, #left, #right {
	display: none;
}

#left, #right {
	position: fixed;
	top: 0; bottom: 0;
	width: 88px;
}

#left { 
	left: 0;
	background: url(images/left.png) left center repeat-y;
}

#right { 
	right: 0; background: url(images/right.png) right center repeat-y;
}

#top, #bottom {
	position: fixed;
	left: 0; right: 0;
	height: 88px;
}

#top { 
	top: 0px;
	background: url(images/top.png) top center repeat-x; 
}

#bottom { 
	bottom: 0px;
	background: url(images/bottom.png) bottom center repeat-x;
}

画像はPhotoshop等で作成した単純なアルファPNGです。

jQuery

$(function(){
	$(".home").hover(function(){
	$(".edge").stop().fadeIn();
}, function() {
	$(".edge").stop().fadeOut();
	});
});