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.

Example

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:

Extra

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

Leave a Reply

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

*
*