Round corners in buttons...

[cusimar9]

I currently have very nice CSS rollover buttons on my website, but they're all rectangular.

The way I've written these buttons is as an anchor within a <p> tag, like this:

<p><a class="button">A Link</a></p>

All I want to do is keep my definition the same, but add 2 more images: one for the left margin and one for the right margin. These images I'll make up to give the round corner effect.

Unfortunately after investigating it further it seems the only property I can use is the 'background' property, but you can't seem to specify images for any of the borders.

Am I missing something?

[KDLA]

As to working with corners in general, you might give this a look: http://www.alistapart.com/articles/customcorners/

(One thing - if your background changes as part of the rollover effect, this won't work, unless you create rollovers for the corners, too. Else, the middle part will change and the corners will remain the original background color.)

You'll want to use three span tags:
<span class="left-side"></span><a class="button">Link</a><span class="right-side"></span>

Your CSS would look like:

.left-side {height: ##px; width: ##px; background: left-side.gif no-repeat;}
.right-side {height: ##px; width: ##px; background: right-side.gif no-repeat;}

Of course, you may have to add margin and padding settings, depending on the settings you've appliced to the button class.

Good Luck -
KDLA

[cusimar9]

Yeah that's the way I figured I had to do it, unfortunately the website is fairly big and I was hoping I could achieve this in the CSS alone, without having to change the HTML...

[KDLA]

If your buttons are all the same width, you can change the background to the button itself - rounded corners and background, then apply this background to the a class="button." But, it won't work if your links' widths are relative to the content within them.

[cusimar9]

Yeah they have to be of variable width