Rogtopia

The Mystical World of Roger.

Hello, My Name is Roger and I enjoy HTML, CSS, and Photoshop. Maybe I can show you some things.

Well Rounded - Rounding without JS or graphics.

July 19, 2009 06:59PM

Creating a rounded edge site can be a tedius chore when you are required to use javascript or images, background graphics to create your desired layout effect.  Well, if you are willing to leave Internet Explorer users in a squared environment, you can do it merely via CSS.

Here's how:

<style type="text/css>
div {
  border-radius : 10px;
}
</style>

The above CSS declaration is defined in CSS 3 and is supported by all modern browsers except Internet Explorer; including Version 8.

Now we want to support earlier mozilla-based and webkit-based browsers by including the following:

<style type="text/css>
div {
  border-radius : 10px;
  -moz-border-radius : 10px;
  -webkit-border-radius : 10px;
}
</style>

The above should produce something like below if we were to include a background-color : #ccc;.

This is a rounded div box!

Oh, and I know from time to time, I would totally avoid borders on rounded edges due to all the limitations with javascript implementations or tedious work involved from the graphical side. Well, just add border:

<style type="text/css>
div {
   border-radius : 10px;
  -moz-border-radius : 10px;
  -webkit-border-radius : 10px;
  border : 2px solid #000;
}
</style>
This is a rounded div box with border enabled!

So, avoid adding extra weight to your project in terms of productivity and document size with all the fun hacks required to make it look the same in all browsers.. mhhmm.. well, hacks just for IE :(

Hey there! I could use some help and was wondering if you could help me? See my site? I only wanted to round off the borders or my website but look at the Member info bar! It's split into 3 places! Could you help?

My site: www.v-petsite.com/moonlightpets

I think I am a little bit late on the reply, but I did check out your website and it doesn't appear that the member bar is split anymore.

Hey Roger, great article!
Not that i'm using it, but there's still a way out for IE using VML (directly or via .htc files).
Example: http://snook.ca/archives/html_and_css/ie-rounded/



Comment