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;.
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>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 :(
