Border-radius: create rounded corners with CSS!

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. One of the most talked about aspects of CSS3 is border-radius property. Rounder corners can be created independently using the four individual border-radius properties (border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius.) We can use border-radius shorthand property for all four corners simultaneously. It will take a single value for all the four corners.

This is an example:

Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.

The code for this example above is actually quite simple:

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

These different corners can also each be handled on their own, Mozilla has other names for the feature than the spec says it should have though, as it has f.i. -moz-border-radius-topright as opposed to -webkit-border-top-right-radius:

Mozilla/Firefox and Safari 3 users should see a box with a rounded left upper corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded right upper corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded right lower corner.

These are handled by / should be handled by:

• -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

Each border-corner properties will take either one or two values( it may a constant value or percentage).

See the example:
border-top-left-radius: 20px; // Single value
border-top-left-radius: 20px 30px; // taking separate values
border-top-left-radius: 5% 10%; // take percentage

The following diagram gives a graphical representation of the first 2 examples:

If one of the values is zero, the corner wont be rendered as rounded corner. It will be a squared one.

We can use border-radius shorthand property define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four constants or percentages.

Example:
border-radius: 4px 8px 2px 6px / 8px 4px 6px 2px;
border-radius: 10px;
border-radius: 10px 15px / 10px;

The first set of values define the horizontal radius for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radius for all four corners. If only one set of values are given; these are used to determine both the vertical and horizontal equally.

If all four values are given, these represent the top-left, top-right, bottom-right and bottom-left radius respectively. If bottom-left is omitted from the given set, its value is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is given it is used to set all four radii equally.

 

The -moz- prefix and -webkit- prefix

While Internet Explorer doesn't support many (or any) advanced CSS properties, you can get started using Firefox and any of the 'Mozilla' family of browsers. Apple's WebKit web browser engine also supports rounded corners making them available in the Safari and Chrome web browsers, the iPhone and other devices running WebKit.

Mozilla’s Firefox browser has supported the border-radius property, with the -moz- prefix, since version 1.0. However, it is only since version 3.5 that the browser has allowed elliptical corners.

 

Here are the CSS and browser-specific attributes

CSS3 Specification	Mozilla equivalent	WebKit equivalent
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

Some Examples

CSS Design Principles

CSS design principles

CSS3 as CSS2 and CSS1 before it, is based on a set of design principles:

• 
  

  Forward and backward compatibility. CSS2 user agents will be able to understand CSS1 style sheets. CSS1 user agents will be able to read CSS2 style sheets and discard parts they don't understand. Also, user agents with no CSS support will be able to display style-enhanced documents. Of course, the stylistic enhancements made possible by CSS will not be rendered, but all content will be presented.

  
  
• 
  

  Complementary to structured documents. Style sheets complement structured documents (e.g., HTML and XML applications), providing stylistic information for the marked-up text. It should be easy to change the style sheet with little or no impact on the markup.

  
  
• 
  

  Vendor, platform, and device independence. Style sheets enable documents to remain vendor, platform, and device independent. Style sheets themselves are also vendor and platform independent, but CSS2 allows you to target a style sheet for a group of devices (e.g., printers).

  
  
• 
  

  Maintainability. By pointing to style sheets from documents, webmasters can simplify site maintenance and retain consistent look and feel throughout the site. For example, if the organization's background color changes, only one file needs to be changed.

  
  
• 
  

  Simplicity. CSS2 is more complex than CSS1, but it remains a simple style language which is human readable and writable. The CSS properties are kept independent of each other to the largest extent possible and there is generally only one way to achieve a certain effect.

  
  
• 
  

  Network performance. CSS provides for compact encodings of how to present content. Compared to images or audio files, which are often used by authors to achieve certain rendering effects, style sheets most often decrease the content size. Also, fewer network connections have to be opened which further increases network performance.

  
  
• 
  

  Flexibility. CSS can be applied to content in several ways. The key feature is the ability to cascade style information specified in the default (user agent) style sheet, user style sheets, linked style sheets, the document head, and in attributes for the elements forming the document body.

  
  
• 
  

  Richness. Providing authors with a rich set of rendering effects increases the richness of the Web as a medium of expression. Designers have been longing for functionality commonly found in desktop publishing and slide-show applications. Some of the requested rendering effects conflict with device independence, but CSS2 goes a long way toward granting designers their requests.

  
  
• 
  

  Alternative language bindings. The set of CSS properties described in this specification form a consistent formatting model for visual and aural presentations. This formatting model can be accessed through the CSS language, but bindings to other languages are also possible. For example, a JavaScript program may dynamically change the value of a certain element's 'color' property.

  
  
• 
  

  Accessibility. Several CSS features will make the Web more accessible to users with disabilities:

  
  
  • Properties to control font appearance allow authors to eliminate inaccessible bit-mapped text images.
  • Positioning properties allow authors to eliminate mark-up tricks (e.g., invisible images) to force layout.
  • The semantics of !important rules mean that users with particular presentation requirements can override the author's style sheets.
  • The new 'inherit' value for all properties improves cascading generality and allows for easier and more consistent style tuning.
  • Improved media support, including media groups and the braille, embossed, and tty media types, will allow users and authors to tailor pages to those devices.
  • Aural properties give control over voice and audio output.
  • The attribute selectors, 'attr()' function, and 'content' property give access to alternate content.
  • Counters and section/paragraph numbering can improve document navigability and save on indenting spacing (important for braille devices). The 'word-spacing' and 'text-indent' properties also eliminate the need for extra whitespace in the document.
  
  
  
  

The Complete CSS-2 Specification

You can get a complete Specification of CS 2 from here. Just Click on the following Link.
Cascading Style Sheets, level 2