Question

I have a simple html button that I wrap into a div. I know that such buttons may render differently on different browsers.

<div id="but_begin"><button type="button" id="but2_begin">Go</button></div>

I have set the following CSS on the button (using JQuery):

$("#but2_begin").css({
    backgroundColor: "yellow",
    width:50
});

and it renders as follows:

I would like to get rid of the shadows around it and make the corners round. Now, I am getting a little scared when I read all the info available on the net about button layout and round corners. It does not seem to converge at all.

My question: how can I set round corners on a HTML button in a portable way? Is this possible with CSS only? Or should I use a library? Or should I use a different HTML tag or method?

Answer 1

You should use CSS3 to generate rounded corners and text-shadows in a portable way. http://css3generator.com/ is a neat tool that can help you do so.

More and more browsers are supporting CSS3 and major browsers such as the latest versions of Chrome, IE, Safari, Opera, and Firefox (covering over 90% of users) certainly support it.

For instance, this code from http://css3generator.com/ reliably creates rounded borders in a multitude of browsers.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;