CSS3 Borders Preview
CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Mozila, Firefox and Safari 3 have
implemented this function, which allows you to create round corners on box-items.
Update: Now works in Internet Explorer from version 9.0
Example 1 - Rounded Borders
background-color: #DAE8EC; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 2px solid #B8CB99; padding: 10px;
Example
This is an example of a box with rounded corners. This example will currently work in Mozilla, Firefox and Safari browsers.
Example 2 - Rounded Borders (Specific Corners)
background-color: #DAE8EC; border-top-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border: 2px solid #B8CB99; padding: 10px;
Example
This is an example of a box with rounded top left and bottom right corners. This example will currently work in Mozilla, Firefox and Safari browsers.
You can use the following properties for
Mozilla-Firefox / Safari
-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
Example 3 - Gradient Borders
border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; padding: 5px 5px 5px 15px;
Example
This is an example of a box with a gradient border. This example will currently work in Mozilla and Firefox browsers.