CODEWITHSUNDEEP
htmlcsslayoutbutton
Jérôme Verstrynge
Jérôme Verstrynge

Reputation: 59586

Portable round corners on html button

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:

enter image description here

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?

Upvotes: 0

Views: 3923

Answers (2)

Sven Bieder
Sven Bieder

Reputation: 5681

The "shadow" you are talking about ids the border of the button. Set border:none; and it is gone. Rounded Corners you can do with pure CSS, but only when it is ok, that older browser will not render it round. Only the newer ones that support CSS3 wil round the corners.

.rounded-corners {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
}

Upvotes: 2

dangerChihuahua007
dangerChihuahua007

Reputation: 20895

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;

Upvotes: 1

Related Questions