When I first brought up the CSS buttons, I was asked how to make them prettier, i.e. not square. I thought there wasn’t a way to do that, but I’ve recently stumbled on a programmer blog that offers great coding tricks (http://dhirajkumarsingh.wordpress.com) and viola, rounded corners are a matter of adding one line…well, three for support of non-CSS3 compliant browsers. On ones that don’t support the feature at all, the buttons will still be square, but on all others they can be nicely shaped.

This is one of the reasons I think of programming as a research field rather than a pure knowledge one. Things change so rapidly that a programmer can never know everything, and what is true one week is different the next. This makes things a little chaotic, but at the same time wonderful.

Anyway, in a continuation of the CSS series (all of which can be found under the CSS tag), I’ve converted the code for the basic .div_button (so it’ll be changed on the older posts as well) and here is your demonstration:

And the code? Well, it’s simple. Add the following three lines to your CSS button definitions. To adjust the curve, just change the number of pixels. I tried 5px, but it was too subtle for my purposes, so I went with 20px. Play around until you find what you need. You can even go wild and make the edges uneven if you want so it’s curved on one side and sharp on another. I also added a width line to the button code so it didn’t stretch the width of the container and removed the line under the link text.

Here’s the code to add:

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

And here’s the full code for the button (not including the base settings):

	.div_button {
		border-style: solid;
		font-size: 20px;
		border-radius: 20px 20px 20px 20px;
		-moz-border-radius: 20px 20px 20px 20px;
		-webkit-border-radius: 20px 20px 20px 20px;
		width: 100px;
		}
	.div_button a {
		text-decoration: none;
		}