How to CSS3 Rounded Corners

One of the better features in CSS3 is the Rounded Corners.

Maybe you noticed I'm using this style in the Developer's Blog theme wich I hacked a little 😉

From now on we can use divs + css instead of the dirty rounded corner images.

Let's get started.

What styles will we use?

  • -moz-border-radius
  • -webkit-border-radius

NOTE: as you know we have to use both styles because depending on the browser it will use one or the other.

It's very simple. Just give the pixels you want to the border radius and we're done.


Developer's Blog

The ouput of the code above:

Developer's Blog

Now the Image of how it looks like if you don't have a CSS3 compatible browser:


If you want to add rounded border to a specific corner you have this styles:

  • -moz-border-radius-topleft / -webkit-border-top-left-radius
  • -moz-border-radius-topright / -webkit-border-top-right-radius
  • -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
  • -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

About Ricard Torres

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

Add <code> Some Code </code> by using this tags.