There are actually two ways to create curved corners on link hovers, and I’ll be explaining both of these along with their respective advantages and disadvantages.

We start with our normal XHTML:

<a href="http://www.elliotswan.com" title="A really
sweet site">Check out my curved corners</a>

Now here’s where we have our two choices. We’ll start with the transparent PNG method first (which is what I am using on this site), and look at the other method next. We first need to make ourself a curved corner image. Since the corner of our background-image is transparent, our CSS background-color must also be set to transparent. As such, our PNG will need to be as wide as your widest link and as high as your highest link.

First we’ll want to style our un-hovered links:


a {
border-bottom: 1px dotted black;
padding: 0px 2px 0px 2px;
}

I added the padding in there so that when we hover, the link won’t be right up against the curved corner–just gives things a little space.

Next comes the hover:


html > body a:hover, html > body a:active, html > body a:focus {
background: transparent url(/linkcorner.png) top left no-repeat;
}

As you see, child-selectors must be used to hide this thing from IE6-, since the browser’s an old piece of crap that doesn’t support transparent .PNGs. So for IE6-, we’ll just give it a normal background color change:


* html a:hover, * html a:active, * html a:focus {
background: #EF2CEB;
}

Since we do have to use a little larger image than we normally would for normal link hovers, we can get rid of any pause between the actual hover and the background appearing with the help of a little JavaScript:


var linkHover = new Image;
linkHover.src = 'http://www.elliotswan.com/linkcorner.png';

The other method is using a .gif. If we use a transparent .gif, our corners aren’t going to be nearly as smooth. Or, we can use a little .gif with a background like such. Our CSS becomes much simpler:


a:hover, a:active, a:focus {
background: #EF2CEB url(/linkcorner.png) top left no-repeat;
}

The image need not be any bigger than just that corner, as we can specify a background color. And of course, .gifs are also supported by IE6-. The reason I didn’t use this method is because I wanted to use the same corner on multiple background colors.

So which method to use is up to you, as each has its perks. swan