CSS rounded corners

[kjharrison]

I'm trying to get rounded corners for the top left and top right using the stylesheet. My CSS is:

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1em;
	color: #F0FFFF;
	background-image: url(../images/cornerTL.gif);
	background-position: top left;
	background-repeat: no-repeat;
}

.leftBoxHeading {
	margin: 0em;
	background-color: #ED125A;
	padding: 0.2em 0em;
	background-image: url(../images/cornerTR.gif);
	background-position: top right;
	background-repeat: no-repeat;
}

According to A List Apart this should work. It does for the top left but not top right. If I delete opne corner the other corner will work. What am I doing wrong?

[Kim]

You can only add one background image per class.

[kuroi]

Can you add the right corner to the #leftBoxContainer instead?

There other factors at work here, including the sizes of your images whose interactions can't easily be ascertained without seeing the site.

[kjharrison]

Can you add the right corner to the #leftBoxContainer instead?

There other factors at work here, including the sizes of your images whose interactions can't easily be ascertained without seeing the site.

That doesn't work either. Do I have to insert a class in a .php file? I can probably surround it with <div></div> tags. Am I right? And if so, do you know which file?
<div class="left"><h3 class="leftBoxHeading" id="categoriesHeading">Categories</h3></div>

The images do fit because I saw them each working. Designing the corners was easy.

[kobra]

I am plagiarizing Kurio here. But this is how he handled this in his template...adding the .centerBoxWrapper. And as his post indicated this should work for left and right side boxes....I think that he was asking that you try the .leftBoxContainer as this already exists.

.centerBoxWrapper {
	margin: 0;
	background-image:url(../images/title_cap_left.gif);
	background-repeat:no-repeat;
	background-position:top left;
	}

.centerBoxHeading {
	margin: 0;
	height:32px;
	background-image:url(../images/title_cap_right.gif);
	background-repeat:no-repeat;
	background-position:top right;
	padding: 0.5em 0.2em;
	}

[kuroi]

Kobra is right. There was a typo in my suggestion. I meant to suggest attaching it to

.leftBoxContainer

Under normal circumstances that should work.

There are situations where it might not work, but we'd need to see your site to understand if one of those is present.

It should not normally be necessary to add additional DIVs to make this work.