Buttons with Round Corners using CSS?

Buttons, Round, Corners, CSS

[cssatsc]

If I create a button (using <button>) without assigning to it any class, then I get the browser's default button - with beautiful rounded corners but not the colors I am interested in.

The moment I assign a CSS class to the button - the beautiful rounded corners disappear and instead I receive very sharp (right-angle) corners.

I searched various references in an attempt to find the property or style that can give me back the rounded corners - to no avail.

I found for the border-style property:

* none
* dashed
* dotted
* double
* groove
* inset
* outset
* ridge
* solid

and width, inset/outset, padding, margins, etc. -- but I couldn't find anything that dictates whether the corner of a button could be round.

What am I missing?

Is it possible at all to create button with round corners, using CSS only?

[DrDoc]

Using CSS3, yes, and the

[url=http://www.google.com/search?q=border-radius]border-radius[/url]

property.

Otherwise you can always use images ...

[cssatsc]

Thanks, DrDoc.

Using CSS3, yes, and the border-radius property.

What about compatibility? AFAIK, IE6 is not compatible with CSS3 and there are still about 20% of the users using IE6...

Otherwise you can always use images ...

Can you elaborate on the images technique? A link to an authoritative article would be super.

Thanks.

[simonuk]

CSS3 rounded corners will not work on most browsers (including the new IE8).

Your options are:

1. Sprite Navigation
2. Background positioning of the corners
3. Flash and other such tools

I would suggestion background positioning because the text can then be fluid and the box will stretch to any widths required.

Stu Nicholls CSSplay website is well worth googling.

[CSS_Kidd]

There is a .htc hack that I use to get rounded corners to work in IE However all 4 corners have to be rounded. Also border-radius will not work at all in Opera.

[adibranch]

support for rounded corners is growing, the current firefox uses them, as does safari and a lot of others. IE8 however still refuses.. typical.

I use them anyway if square corners arent too detrimental to the layout overall. For something small such as a button, i'd say this isnt gonna make much difference to the success of your website, so use rounded CSS.

[DrDoc]

As for a way to use images:

background: transparent url(link/to/your/images/button.png) no-repeat center center;
border: none;
height: Xpx;
width: Xpx;

It does require all buttons to be the same size, but at least it's an option ...

[cssatsc]

Belated thanks to all of you. Your answers have been most helpful and I learned a lot on the way to implementing the preferred solution on my web site.

I actually implemented most solutions before finally deciding to stick with DrDoc's image based solution.