
Designing with CSS – Rounded Corners
The CSS3 border-radius property allows web designers and developers to create rounded corners easily in their design elements, without the need for corner images or the use of multiple div tags. At present boder-radius property enjoys widespread browser support.
CSS3 Generator
If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.
In this article I shall illustrate generation of code for rounded corners using border-radius property of CSS3 with the help of this tool. The procedure is simple. You chose your design element from the drop-down menu, enter your values, and get your auto-generated code for your project.
Are your borders going to be rounded equally? Yes
Border Radius: 10px
Your Code:
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
Are your borders going to be rounded equally? No
Border Radius
Top Left: 10px
Top Right: 10px
Bottom Right: 20px
Bottom Left: 20px
Your Code:
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
Browser Compatibility:
Firefox 3.0+ Chrome 4.0+ Safari 3.1+ IE 9+ Opera 10.5+
Example of Box with Rounded Corners
This example uses the CSS3 border-radius property and currently it will not work in all browsers. I am using this code on my blog as you could see various boxes with rounded corners like bread-crumb bar, search bar, author box.
CSS Code:
.box {color:#807970;background:#f9fafa;border:1px solid #dbe1e6}
.corner {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}
HTML:
<div class="box corner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Example:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This box created with border-radius property of CSS3 should have rounded corners at present for Safari (version 5 onward), Chrome (version 5 onward), Opera (version 10.5 onward) and IE9.
Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix. However, it is only since version 3.5 that the browser has allowed elliptical corners. Prior to version 3.5, the browser only accepted one value per corner, resulting in corners with equal horizontal and vertical radii.
Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward).
Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward.
CSS3 Generator
If you are looking for a web host that will provide hosting environment for WordPress, BlueHost is one of the best choices. My website and blog are hosted by BlueHost.
Click Here to Signup for BlueHost
Get a professionally designed special custom five-page website ideal for small business that need an online presence as well as personal sites or informational sites at an amazing price of only $125.
Visit our website to learn more about Small Business Website Design

2 Comments
Nice utility for CSS newbies. But perhaps still the browser issue comes into play of IE 9.
My recent post 9 Ways to Promote Your Blog Other Than SEO
Modern browsers are adopting CSS 3. I am using CSS 3 where the features don't cause any problem with the browser. For example, rounded borders may or may not show up depending upon the browser but won't cause any problem.
One Trackback
[…] This post was mentioned on Twitter by Kazuko M. and Kazuko M., Subrato Paul. Subrato Paul said: My blog: CSS3 Box with Rounded Corners http://goo.gl/fb/fB6wd #css #borderradiusproperty #css30 #csstools […]