Programming4us
         
 
 
Programming

CSS for Mobile Browsers : Common Patterns (part 2) - Rounded corners

12/14/2010 4:00:30 PM
2. Rounded corners

Designers seem to love rounded corners (shown in Figure 1), and for years this was the nightmare of every web developer who needed to lay out a box with this feature. Table-based layouts for rounded corners are inappropriate for the mobile web, so we can only rely on CSS solutions. If a device doesn’t render the style (see Table 2 for a compatibility list), forget about rounded corners for that device.

Figure 1. The rounded corners feature allows us to round any defined border or background color on compatible devices.


Table 2. Rounded corners compatibility table
Browser/platformRounded corners compatibility
SafariYes
Android browserYes
Symbian/S60Partial
Nokia Series 40No
webOSPartial
BlackBerryNo
NetFrontNo
Openwave (Myriad)No
Internet ExplorerNo
Motorola Internet BrowserNo
Opera MobileNo
Opera MiniNo

WebKit has an extension for rounded corners (-webkit-border-radius); Mozilla also has one (-moz-border-radius), but with very low compatibility in mobile devices.


Note:

Another solution is the use of canvas for drawing a rounded rectangle.


The -webkit-border-radius attribute can be defined as one value (like 5px or 10%), two values (top-bottom and left-right), or four values giving the radius of each corner separately. These are samples of different styles:

.rounded {
-webkit-border-radius: 10px;
}
.rounded2 {
-webkit-border-radius: 10px 20px;
}
.rounded3 {
-webkit-border-radius: 3em 2em 3em 2em;
}
Other -----------------
- CSS for Mobile Browsers : Common Patterns (part 1) - Absolute and floating positions
- iPad SDK : New Graphics Functionality - The Basic Drawing Architecture
- jQuery 1.3 : Compact forms (part 6)
- jQuery 1.3 : Compact forms (part 5)
- jQuery 1.3 : Compact forms (part 4)
- jQuery 1.3 : Compact forms (part 3)
- jQuery 1.3 : Compact forms (part 2) - AJAX auto-completion
- jQuery 1.3 : Compact forms (part 1) - Placeholder text for fields
- The Art of SEO : Duplicate Content Issues (part 3)
- The Art of SEO : Duplicate Content Issues (part 2) - How Search Engines Identify Duplicate Content
- The Art of SEO : Duplicate Content Issues (part 1) - Consequences of Duplicate Content
- The Art of SEO : Content Optimization (part 2)
- The Art of SEO : Content Optimization (part 1)
- iPad SDK : New Graphics Functionality - Introducing Dudel (part 2)
- iPad SDK : New Graphics Functionality - Introducing Dudel (part 1)
- iPad SDK : New Graphics Functionality - Bezier Paths
- CSS for Mobile Browsers : Where to Insert the CSS (part 2) - Media queries
- CSS for Mobile Browsers : Where to Insert the CSS (part 1) - Media Filtering
- Developing an SEO-Friendly Website : Keyword Targeting (part 4)
- Developing an SEO-Friendly Website : Keyword Targeting (part 3)
 
 
Most View
- Windows 7 : Understanding User Account Control (part 1) - Elevating Privileges
- Windows 7 : Customizing Startups Using the Boot Configuration Data
- Windows 7 : Touring the Control Panel Window
- Windows Phone 7 : Working with the Suggestion Bar
- Windows 7 : Working with the Command-Line Tools (part 3) - Working with System Management Tools
- Windows Vista - File Encryption : Encryption File System
- Windows Server 2008 : Working with NAP (part 6)
- iPad SDK : Keyboard Extensions and Replacements (part 1) - Adding a Keyboard Button in Dudel
- Scripting Windows 7 with WSH : Programming the Windows Management Instrumentation Service
- Windows Server 2008 : Controlling Access to Web Services (part 2)
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS