Rounded corners using CSS

[Slinkie]

Hi Folks,

I have a few title bars on a website that I want to add rounded corners to the top left and top right.

However I am struggling as I am already using a background image for behind the title text so how do I easily go about putting rounded corners in,

Current CSS looks like this;

#content .top {
	height: 16px;
	padding: 8px 0px 6px 0px;
	background: url('../image/11.png') repeat;
	
}
#content .top h1, .heading {
	color: #FFFFFF;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	margin: 0px;
}

I have 4x4 pixel image repeated behind all of the text so how do I go about adding rounded corners aswell?

 

[Slinkie]

Hi,

No, I have used the repeated 4x4 image as it is used in a number of places on my site, all different widths.

I was looking to create 2 4x4 pixel images with the left and right round corners and use them in the top left and top right and have the rest of the space filled with the regular 4x4 but I don't think this is possible.

I can potentially make sure all of the title backgrounds are the same height and say have a 16x4 image at either end if that is easier?