How to Add Rounded Corners with CSS

Last week I shared how to style a link to look like a button. Today we’re going to build on that to make them have rounded corners, like so:

I am a button!

Here’s the important piece of code that gives you rounded corners:

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

Add that little bit of code to the .button-NAME code, editing the pixel values until you get the effect you want (make sure to keep all 3 values identical though).

.button-NAME {
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

Now the fun thing is that you can add rounded corners to just about any CSS class. Let’s say you want the avatars in your WordPress comments section to have rounded corners. Just add this code to your theme’s CSS:

.comment .avatar {
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

But what if you wanted the avatars to be circular? Simple! Set the pixel values to half the width/height of the avatar. If they’re set to display at 48px, set the border radius values to 24px. Note: this only works with elements that are square!

Some other places you could use rounded corners: search bar, post thumbnails, sidebar images, and more!

Want more tips to better your blog? Subscribe to my weekly tipletter for exclusive tips, tricks, and offers delivered straight to your inbox.