A Rounded Corner Updated PDF Print E-mail
Written by Fr. Robert Bower   
Thursday, 23 December 2010 08:25

 

Having a box with rounded corners just got easier.

tab 1 tab 2 tab 3

 

CSS3 supports boxes with rounded corners using the border-radius property, This new property is currently supported by Mozila/Firefox, Safari 3, and Google Chrome.  When I originally wrote this article, both webkit and Mozilla had there own implementation of the property.  New webkit based browsers now support the W3C CSS3 specification and the nightly builds of Mozilla based browsers all support the W3C CSS3 specification but for complete browser comparability all three implementations should be used.

The code for the first box above is:

<div style=" background-color: #ccc; border-radius:50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 1px solid #000; padding: 10px;"> <h2 style="text-align: center;">Having a box with rounded corners just got easier.</h2> </div>

The second example shows how easy it would be to make a tab menu using this new property.

The code for the tabs is:

<h2 style="text-align: center; ">

<span style=" background-color:red; border-top-left-radius: 50px 20px;-moz-border-radius-topleft: 50px 20px; -webkit-border-top-left-radius: 50px 20px;border-top-left-radius: 50px 20px;-moz-border-radius-topright: 50px 20px; -webkit-border-top-right-radius: 50px 20px; border: 1px solid #000; padding: 10px;">tab 1</span>

<span style=" background-color:blue; border-top-left-radius: 50px 20px;-moz-border-radius-topleft: 50px 20px; -webkit-border-top-left-radius: 50px 20px;border-top-left-radius: 50px 20px;-moz-border-radius-topright: 50px 20px; -webkit-border-top-right-radius: 50px 20px; border: 1px solid #000; padding: 10px;">tab 2</span>

<span style=" background-color:green; border-top-left-radius: 50px 20px;-moz-border-radius-topleft: 50px 20px; -webkit-border-top-left-radius: 50px 20px;border-top-left-radius: 50px 20px;-moz-border-radius-topright: 50px 20px; -webkit-border-top-right-radius: 50px 20px; border: 1px solid #000; padding: 10px;">tab 3</span>

</h2>

 
The border radius property is expressed as border-radius:length length and -moz-border-radius: length length and -webkit-border-radius: length length where length is the radii of the corner.  A value of 0 creates a square corner  and the larger the number the greater the curve. The first value is the horizontal radius of the ellipse that forms the rounded corner, and the second value is the vertical radius.  When only one number is expressed the same number is expressed for both the vertical and horizontal radius.  The border-radius is the W3C standard and used by the newer webkit browsers, -moz-border-radius is used for Mozilla/Firefox and -webkit-border-radius is used for webkit based browsers that follow the older implementation.

The border-radius property of each corner can be set independently by using the following:

W3C Specification WebKit's Initial Implementation Mozilla’s Implementation
border-radius -wekit-border-radius -moz-border-radius
border-top-left-radius -webkit-border-top-left-radius -moz-border-radius-topleft
border-bottom-left-radius -webkit-border-bottom-left-radius -moz-border-radius-bottomleft
border-top-right-radius -webkit-border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -webkit-border-bottom-right-radius -moz-border-radius-bottomright

 

Now go have fun making boxes.
 

Computer Resources