How to add rounded borders on a a:hover in ul li list?

Question

I have a Wordpress site where the li width changes in my navigation depending on the width/length of the link in my navigation ul li list. I am trying to add a rounded-border background image to each of the li, yet since each one is different in size I am lost on how to implement this. How can I create a background image that will change in width with rounded borders for each of my li links? Any help would be greatly appreciated.

Answer 1

The only solution that will be readily compatible with all browsers everywhere is slicing your background image up and making the corners their own little images.

Answer 2

Adjusting the size of a background image is not possible without heavy Javascript and possibly even server-side stuff. Two workaround ideas (both not tested):

CSS 2 only: You could give the li "position: relative" and then position a DIV or other element with rounded corners and "position :absolute" within it. Give it "left:0px;right:0px;top:0px;bottom:0px" so it should always be as large as the li. To avoid the content being overlaid by the element, give the content "position: relative" and a z-index.

Cross browser code swamp:

Give the li position:relative and position four rounded corner images using "position:absolute" and "left:0px;top:0px", "right:0px;top:0px" and so on.

Answer 3

Here's a technique I "borrowed" that doesn't require images!:

http://blog.benogle.com/2009/04/29/css-round-corners/

He fully explains the technique so you know how he does it.

Answer 4

I suggest starting with defining the CSS3 rounded corners styles (see also here). In the long run every browser should support this.

As a fallback mechanism you could use background images with the sliding door technique.

Answer 5

Future way

Pros: easy and simple
Cons: non IE compatible

-moz-border-radius-topleft  / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Javascript way

Pros: Simple
Cons: Do not work if javascript is turned off

Use Jquery and the JQuery Corner plug-in

<script type="text/javascript">
$("#menuItem1").hover(function(){
       $('#menuItem1').corner(); 
});
</script>

Pure CSS way

As described in http://blog.benogle.com/2009/04/29/css-round-corners/
Pros: Pure css
Cons: Add lots of unneeded markup

.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}


<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
    <div class="contentf">
        <div>Round FILL!!</div>
    </div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>