Round Corners

[dombrown]

Hi,This might be a daft question but i am new (ish) to HTML and CSS. I basicly have a page with 6 images on and to keep the page inline with the home page i wanted the images to have a round corner. Now i've done this on the homepage but it just has text in, i've tried doing the same on the next page but the border is rounded but the image is not and it looks awful!!!Is there a way to make the image rounded like the border or make the border sit above the image so you can't tell? Would have to sperate the images from the boxes, wrap them in their own DIV tags and then place them on top of each other? Seems abit of a pain to do that.The site is not live so i cannot provide a picture for you all.Thanks in advance for your helpHere is the CSS for the Programs Page:

/* Our Programs */  #programcontent {  position:relative;  top:200px;height:1200px;}#programtop {	color: #E82583;	font-size: 25px;	position: relative;	bottom:200px;	float:left;}#programhotspots {  position:relative;  top:50px;  height:1000px;}#programhotspotleft {  position:relative;  bottom:250px;  float:left;  margin-left:50px;  width:350px;}	 #programhotspot1 {	  margin-left:20px;	  width:300px;	  height:200px;	  border-style:solid;	  border-color:#E82583;	  border-width:5px;	  border-radius:25px;	  behavior: url(/css/PIE.htc);	}	 #programcaption1 {	  width:350px;	  height:100px;	  color:#000;	}#programhotspot3 {		margin-left:20px;	  width:300px;	  height:200px;	  border-style:solid;	  border-color:#E82583;	  border-width:5px;	  border-radius:25px;	  behavior: url(/css/PIE.htc);	}	 #programcaption3 {	  width:350px;	  height:100px;	  color:#000;	}#programhotspot5 {		margin-left:20px;	  width:300px;	  height:200px;	  border-style:solid;	  border-color:#E82583;	  border-width:5px;	  border-radius:25px;	  behavior: url(/css/PIE.htc);	}	 #programcaption5 {	  width:350px;	  height:100px;	  color:#000;	}#programhotspotright {  position:relative;	bottom:250px;  float:right;  margin-right:75px;  width:350px;}#programhotspot2 {		margin-left:20px;	  width:300px;	  height:200px;	  border-style:solid;	  border-color:#E82583;	  border-width:5px;	  border-radius:25px;	  behavior: url(/css/PIE.htc);}	 #programcaption2 {	  width:350px;	  height:100px;	  color:#000;	}#programhotspot4 {		margin-left:20px;	  width:300px;	  height:200px;	  border-style:solid;	  border-color:#E82583;	  border-width:5px;	  border-radius:25px;	  behavior: url(/css/PIE.htc);	}	 #programcaption4 {	  width:350px;	  height:100px;	  color:#000;	}#programhotspot6 {		margin-left:20px;	  width:300px;	  height:200px;	  border-style:solid;	  border-color:#E82583;	  border-width:5px;	  border-radius:25px;	  behavior: url(/css/PIE.htc);	}	 #programcaption6 {	  width:350px;	  height:100px;	  color:#000;	}#programbottom {	color: #E82583;	font-size: 25px;	position: relative;	bottom:200px;	float:left;}

[ShadowMage]

Since border-radius is CSS3 and CSS3 is not a finalized spec yet, browser support may still be a little flakey. There probably is no fix, but you might try putting the images in a container div. Give the div overflow: hidden; and the border-radius. See if that works. I kinda doubt it will, but maybe...

[dombrown]

Since border-radius is CSS3 and CSS3 is not a finalized spec yet, browser support may still be a little flakey. There probably is no fix, but you might try putting the images in a container div. Give the div overflow: hidden; and the border-radius. See if that works. I kinda doubt it will, but maybe...

omg, i think i am going to scream!!why on earth did i not try that hehe, i thought a couple of days ago it might be that but must have forgotThanks alot mate

[dombrown]

omg, i think i am going to scream!!why on earth did i not try that hehe, i thought a couple of days ago it might be that but must have forgotThanks alot mate

ah, we should be so lucky. It works in FF but not IE or Chrome