another way to create rounded corners for html buttons ?

Today , I have Created a simple tutorial on regarding CSS rounded corners on my rising programming blog. ( http://www.mayurgodhani.in )
But i don't know that there is another simplest way to do this easier then my suggestion here ? http://goo.gl/oZDk7

If you know more efficient way then my tutorial then kindly inform me here, so i can update my article asap.

 

You forgot to mention that IE7&8 do not support rounded corners and this is CSS3.0, which isn't offically (fully) released or supported by all browsers. There is a google fix for rounded corners for IE, but it can cause problems for list menus.

 

oh....yeah.
This is CSS3.0 but currently it is supported by New versions of Firefox.
And about Google chrome, IE, Opera :
If there is any fix , i will try to mention it in post....

Thanks for Great suggestion

 

Yes, that's a good point about the rounded corners. 
I tried some CCS3.0 and HTML5 elements recently and it works in the latest versions of Chrome and Firefox. No idea who still uses IE..but yeah, web devs should also think about these people.

 

Wouldn't another solution be to use an image background on the submit button? Set the width and height to that of your background image, remove the border, and set the line-height to the height so that the text vertically centers (assuming you have set vertical-align to middle). So if you have a 50x20 pixel image you want to use as your background, you could do:

input[type=submit]{
background: url('images/bg_filename.png') center no-repeat;
border: 0;
width: 50px;
height: 20px;
line-height: 20px;
}

Code (markup):

By the way another 2 quick things:

• I see you used "-moz-border-radius: 5px 5px 5px 5px;" in your example. It may be worth mentioning that you can shorten that by using "-moz-border-radius: 5px;" instead. Always good to know these things!
• Another thing is maybe you should also include "-webkit-border-radius: 5px;" and "border-radius: 5px;" as well?

 

Using images is neither simpler nor easier. Also, you can eliminate the -moz part since FF has supported border-radius since FF4 and intelligent FF users keep their browsers up to date.

 

Well, for me , I rather use image for that kind of round-corner button, it's more 'safe' to apply with other browsers.

 

@Darkhodge
Thanks for good suggestions..
I have updated article on my site

 

No problem at all. You forgot to update the code in the "Explanation" section to reflect the change though!

 

dude .. Now I have updated full post.
Thanks

 

How is it more safe? border-radius works in ALL browsers (except IE<9).

 

That's why I said more "safe" (could be rendered with any browser,even on IE , I guess..).

 

We could use ie specific stylesheet which shows image instead of the css3 buttons.

 

To take care of IE8 and below, I used "cornerz" java script... Do a google search for it. The "Bullet Proof Curved Corners" should be the first site you see.

I built a Wordpress Theme using it and it did the job quite well.

Hope this helps...

 

You can't really do rounded corners with IE but you can use border-radius property for it with any browser that supports CSS3.