shadow effects on table borders

[edit] i was wrong, read the post wrongly.

well i don't think its possible to just say like border-shadow: 20px;

what i have done and see done a lot is use pictures to do it and then assign them to a div in the css. for example my code is like this:

i have a content-wrapper, content-header, and content div in css. Im guessing you know all about css right?

with the content and content-header are both divs inside the content-wrapper but not inside each other, so in otherwords it goes:

Code:
content-wrapper begins
content-header starts
content-header ends
content starts
content ends
content-wrapper ends


then in css each of those will have an background image to it.
so the content-wrapper has a footer image where it will have the bottom part with rounded corners, then the content-header has the top part with the rounded corners and the content has a line about 10px in height that repeats the y axis, so that for as long as the text in the content div is the image or border will be.

here is my code for the css, feel free to copy and change it to what you'd want:

Code:
#content-wrapper{
	width: 500px;
	background: url(images/content_bottom.png) left bottom no-repeat;
	float:right;
	clear:right;
	padding:0px;
	margin:15px 0px 20px 0px;
	position:relative;
}

#content{
	padding:0px 20px 0px 20px;
	margin: 0px 0px 15px 0px;
	width:460px;
	text-align: left;
	float:right;
	background: url(images/content_middle.png) left top repeat-y;
	overflow:hidden;
}

#content-header{
	width: 500px;
	background: url("images/content_top.png") left top no-repeat;
	float:right;
	clear:right;
	padding:0px;
	margin: 0px 0px 0px 0px;
	position:relative;
	bottom:0px;
	text-align: left;
	text-indent: 20px;
	color:#ffffff;

and the html, i had to use span and a . for the header so that it would appear, i hid it by making the color the same colour as the background.

Code:
<!-- BEGINNING OF THE CONTENT AREA -->
				<div id="content-wrapper">
				<div id="content-header">
				
				<span>
				.
				</span>
				
				</div>
				
					<div id="content">  
<p>stuff here</p>
</div>

hope you understood that, i tried to write it very simple so that you would. if you're new to web building you might not understand that and that if you just simply copy and paste it wont work as you don't have the images. if you need more help just say and i will relpy very quickly, except maybe tomorrow late evening.

i have checked there code and it appears they do it in a similiar method as to what i have said.
 
Last edited:
yep i follow you ok! i have built a few sites and used css but they were mostly table based.. trying to get away from that and onto divs!

I managed to sort out some problems with nested divs and aligning them but got all that sorted ok.

I had an idea that doing wrapper borders would be using images but wasnt too sure!

Any more queries and il be sure to get back to ya!

Many thanks
Jonny
 
Back
Top Bottom