Rounded corners in CSS

I'm trying to create some tabs for this website, and I want the two bottom corners to be rounded, so I thought I'd create two divs, assign a different background image to each, and position them properly. But when I view the result through firefox, I only see one corner of the box when I hover over the link. Does anyone have a solution for this problem? Here's the code:

HTML:

<div class = "bg"><div class = "br">
<ul>
<li><a href = "link.htm">Contact us</a></li>
<li><a href = "link.htm">Portfolio</a></li>
</ul>
</div></div>

Code (markup):

CSS:

div.br li:hover{
	background: url(rcurve.png) no-repeat bottom right;}
	
div.bg li:hover{
	background: url(lcurve.png) no-repeat bottom left;}

Code (markup):

 

You don't need the DIVs. Just apply the styles to the list items and anchors directly. The anchors will either need to be floated or given a display: block state and have a height declared either way in order for it to work though.

 

li {
    float: left;
    margin-right: 1em;
    background: url('rcurve.png') right bottom no-repeat;
}
	
a {
    display: block;
    background: url('lcurve.png') left bottom no-repeat;
    line-height: 1em;
}
.clear {
    clear: both;
}

Code (markup):

<ul>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">Portfolio</a></li>
</ul>

<!-- next tag that comes after this will have class="clear" -->

Code (markup):

Something like this? Eventually you can float both list items and anchors.

Also, when you want to change the background color on onmousehover, you will either have to add an obtrusive <span> tag inside anchors or use JavaScript.

 

pretty much, but without the pointless and unnecessary "clearer" class. A couple things though. I'd put padding on the links instead of the margin on the LIs, and set the line-height on the anchors to be the same as the list itself. It works FAR far better cross-browser that way. Oh, and JavaScript is NOT necessary for this.

 

If he wants the rounded corners to change color on onmoushover then yes, either JavaScript or adding <span> tags inside anchors. I don't know about any other way (unless the anchors are fixed width, of course).

 

Well, my mom's funeral is Saturday and I still have a lot of house cleaning to do (my brother is coming in from out of state for the funeral), so I won't be able to show you how it's done until Monday at the earliest.

But it IS possible.

 

I'm sorry to hear that.

Take your time and if you feel like posting here again in week or two I would like to see how it's done without JavaScript.

 

what I would like is for the rounded corners to be visible with a same colour background on hover. Thanks for the help guys, it worked great without hover, I'll try my best to make it work with hover.

 

5 Methods CSS Curvy Corners

I found this article to be very useful for CSS / JS solutions to rounded corners.