As it stands, rounded corners are currently supported in modern versions of Firefox, Safari, and Chrome. Unfortunately, you’ll need to use two different declarations to get all these browsers working. The basic declarations should look something like this:

/* Supported in Firefox */
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

/* Supported in Chrome and Safari */
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

The Rounded Example

Below you will find an example of rounded corners in action. If you’re using a modern browser you should see the grey box with rounded corners. (if using IE, I’ve put in a screenshot of what things look like when using a respectable browser)

.rounded {
width: 500px;
padding: 30px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

Screenshot Example For Internet Explorer (sigh…)

But What Does the W3C Say?

Due to the fact that border-radius is not officially supported by any browser, it might be a good idea to check out what the W3C has to say about the subject. I was surprised to see how detailed they were and I highly recommend checking out their official specs. As a reference, the official (but currently unsupported) declarations are:

border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

There are tons of neat variations you can do, but they go a little beyond the scope of this article. Check out the W3C specs for the full explanation, or, check out some of these links that do a good job documenting css rounded corners:

• CSS3 Info
• The Art of Web
• Zen Elements

Step 1 – Make or Find a Button

For this tutorial I’ll be using my green glossy buttons from a previous freebie post. Feel free to download the source PSD and follow along, or just make your own button style.

Step 2 – Prepare the Button

Before we really get started, it’s important to know what size we want to make our button. For this example I’ll create a button that is quite large, I’m thinking around 300px by 60px in size. So go ahead and crate a new Photoshop document with the dimensions you want.

After you’ve created the document, import my button (or yours) and scale it up so that it fills almost the entire document. If you have a little extra space on the sides it’s not the end of the world, just make sure that your button is perfectly centred on the canvas. To centre somthing perfectly you just need to:

1. With your button folder/layer selected, use the marquee tool (m-key)  to select the entire canvas (apple-a)
2. Without deselecting anything, choose the Move tool (v-key) and use the alignment tools in the top panel to centre your button vertically and horizontally.

A Perfectly Centred Button

Step 3 – Create a Rollover State

Next up we need to create a rollover state. Basically, we need to double our canvas size (vertically) and duplicate our button. From the top menu select Image > Canvas Size… and double the height of your canvas (120px if you’re following my example). Once your canvas size is doubled, divide it vertically with a horizontal guide.

Now you need to duplicate your button and centre it perfectly in the top section. The top button will be what our button looks like when you rollover, for now it looks the same as the bottom.

Next we add a rollover effect. If you’re using my buttons, you can open up the layer styles of the top button and slide the inner glow up to 75%. This will give our button a subtle glow effect when we hover over it.

With your button and rollover effect ready to go, you can now “save for web.” One important thing to consider here is what your background will be like. For my example I’ve made the background transparent and saved my buttons in PNG format. This means my buttons are not supported in IE6, but you could just as easily choose a background color and ditch the transparency, making your buttons IE6 friendly.

Step 4 – CSS Sprites and Some Basic HTML

Now comes the fun part, creating the button. First, we’ll start with some markup, a simple and humble link:

 <a href="#" class="button">My Glossy Button</a> 

I’ve given this link a class so that I can target it easier, but other than that it’s just a plain old link. Moving on let’s do some CSS magic. The basic idea is that we hide the link text using the text-indent property and give the link a background-image that only shows the non-rollover state. On hover we simply shift the background to show hover state, avoiding any loading time that is typical of CSS/Javascript image swaps.

a.button {
display: block;
width: 300px;
height: 60px;
text-indent: -999em;
background: url(css-glossy-rollover.png) 0px -60px no-repeat;
}

a.button:hover {
background-position: 0px 0px;
}

If you’ve done everything right the button should look something like this:

My Glossy Button

Well this article is going to be a quick example of a nice textarea styled with CSS. There is no reason why this should be hard to do, as it literally takes 2 minutes to put together.

Let’s get started. First we have our textarea:

Just a couple things to note here… First off, try and make sure there are no extra spaces between the start of the textarea tag and the end. In my experiences having any space will sometimes cause the textarea to be pre-filled with spaces, which is both annoying and confusing when you’re trying to fill out a form. Second, you almost always want to give your textarea an id, you’ll need it to target with the label.

Next up some CSS styles:

#commentBox {
     display: block;
     width: 400px;
     height: 120px;
     padding: 8px;
     border: 1px solid #cccccc;
     line-height: 130%;
     font-size: 13px;
}

What we end up with is a nice standard textarea that can be customized to fit whatever theme you need. It should look like the example textarea below:

So thats it! Only 7-10 lines of CSS for a basic but nice looking textarea. From here it would be really easy to customize this with background-images, fancy borders, different colors, jQuery hover states, or whatever else you think would look nice.

Smashing Magazine Footer Links

Taken from the footer of Smashing Magazine

Smashing Magazine’s current site (Jan 2010) has some really classic links located in the footer. They are clean, subdued, and are missing their text-decoration (the underline).

Nettuts and the Block Link

Looking at another footer, we can see an example of some stylish block links. I initially did not enjoy these links, but for some reason they’ve really grown on me over the last few months. I’ve even come to enjoy how they are all different widths, something that I would have hated in my earlier days.

The Happy Cog Header

One of my favorite sites, so I couldn’t leave them out. Happy Cog uses the traditional underlined link in their main navigation, with a block link hover effect. While it seems that underlines have become less popular lately, I think they provide users with instant recognizable links.

A List Apart General Links

I wanted to throw this in here because I really enjoy the hover effect on A List Apart. They use a background color AND an underline.

Anyways, I’ll be adding to this list as I find more interesting links. I know it’s a little trivial, but things like this are the bread and butter of a well crafted site. In the meantime, answer this scientific poll:

[poll id="2"]