BLOG

Implementing rounded corners has always been somewhat of a chore. With the current CSS1 and CSS2 specifications, you’re forced to slice up rounded corner images, and add all sorts of bulky, most times un-semantic code, just to achieve a rounded corner effect. With the introduction of CSS3, rounded corners is easy work. This technique won’t work in every single web browser today, but users in older browsers will still have a pleasant experience on your site.

Let me start off by commending Dan Cedarholm and Ethan Marcotte for their excellent job on Handcrafted CSS. This is where I learned the rounded corner technique, and I hope you find it as useful as I did.

A Basic Hyperlink

Our rounded corner button is going to be achieved by horizontally repeating a transparent PNG. Then, using CSS3, we’ll round off the corners and on what is essentially just a hyperlink.

Here’s the HTML:

<a href="/about" class="rnd_btn">Learn More → </a>

Here’s the End Result:

(Note: if you are viewing the button in anything other than Safari or Firefox, you will not get the rounded corner effect)

Learn More →

Creating the PNG Background Image

The next step is to create the PNG background image that will repeat horizontally to create the ‘glossy’ effect. Start by firing up your favorite design program (mine is Fireworks) and create a transparent image that is 3px x 200px tall. This will leave us plenty of room should there ever be a user viewing the site at a larger than normal font-size. Now, create a rectangle that is half the height of the document, in this case 100px tall, and fill it in with white. Now set the transparency on that rectangle to 25%. You should now have a transparent image that has the top half filled in with a 25% opacity white rectangle, and the bottom half completely transparent.

Writing the CSS

Now that we have our link marked up and our image created, its time to sprinkle on some CSS magic. Here is the CSS that will achieve a nice button effect without the rounded corners. This is also how the button will render in browsers that don’t currently support CSS3. Although the corners aren’t rounded, users still get a nice looking button.

Here’s the CSS:

.rnd_btn{
padding:8px 15px;
color:#FFF;
font-weight:bold;
background:#4987B8 url(bg_glossy.png) 0 50% repeat-x;
text-decoration:none;

Here’s the Button:

Learn More →

Now lets round off those corners. You’ll notice I am going to define the rounded corners 3 different times. CSS3 boasts a ‘border-radius’ property which makes it super easy to round off the corners of any element. Browser vendors have not began implementing this property into their browsers, but since we want to future-proof our buttons, we’ll add the property in there. Safari and Mozilla have began implementing the rounded corner specification using their vendor-specific extensions. (Note: if you are viewing the buttons below in anything other than Safari or Firefox, you will not get the rounded corner effect)

Here’s the Updated CSS:

.rnd_btn{
padding:8px 15px;
color:#FFF;
font-weight:bold;
background:#4987B8 url(bg_glossy.png) 0 50% repeat-x;
text-decoration:none;
border-radius:14px;
-webkit-border-radius:14px;
-moz-border-radius:14px;


Here’s the Updated Button:

Learn More →

Simple Rollover Effects

Adding a nice rollover couldn’t be easier. Simply change the background color of the button and you’ve got a beautiful hover effect.

Here’s the CSS:


.rnd_btn:hover{
background:#C75F3A url(bg_glossy.png) 0 50% repeat-x;
}


Here’s the End Result:

Learn More →

Conclusion

Getting over the idea that your website won’t look 100% the same in every single web browser is probably the biggest step in your transition to CSS3 (it was for me anyway). Adding rounded corners with only a few lines of code is such a beautiful thing. I hope that you continue to push the envelope with your projects and begin using CSS3 in your projects today.
Posted by Sean Corey, Zer0 to 5ive creative strategist