I am attempting to place an image on the top and bottom of a <div> to make a corners of a box rounded. In the CSS I am trying:

 

border-top: url(../images/backgrounds/top_red.jpg) 0 0 no-repeat;

 

This doesnt seem to be working for me, any tips guys & gals?

You only need one image with top rounded corners and the bottom, but you will need at least two divs. I actually use three though. CSS looks something like this:

 

.green {
	background: #006B3F;
	color: #FFFFFF;	
	margin: 0;
	padding: 0;
}

.green-top{
background-image: url('../images/rounded-green.jpg');
background-repeat: no-repeat;
height: 13px;
	margin: 0;
	padding: 0;	
overflow: hidden;
}

.green-bottom{
background-position: bottom;
background-image: url('../images/rounded-green.jpg');
background-repeat: no-repeat;
height: 13px;
	margin: 0;
	padding: 0;	
}

 

HTML looks like this:

 

				<div class="green">
				<div class="green-top"></div>
					<p>here is my text</p>
				<div class="green-bottom"></div>
			</div>

or...

 

				<div class="green">
				<div class="green-bottom">
					<p>here is my text</p>
			   </div>
			</div>

Nice one guys will give it a whirl

or...

 

				<div class="green">
				<div class="green-bottom">
					<p>here is my text</p>
			   </div>
			</div>

 

Does this work nicely in internet explorer six?