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 -----------------
- 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)
- Developing an SEO-Friendly Website : Keyword Targeting (part 2)
 
 
Most View
- Overview of Process Management in Microsoft Visio 2010 (part 1)
- SQL Server 2008: Administering Database Objects - Working with Database Snapshots
- Windows 7 : Customizing Startups Using the Boot Configuration Data
- SharePoint 2010 : SQL Server Reporting Services 2008 (part 2) - Understanding the Architecture of SQL Server Reporting Services 2008
- Windows Server 2008 Server Core : Installing Applications with the MSIExec Utility
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 5) - The Freehand Tool
- SOA with .NET and Windows Azure: WCF Extensions - WCF Transactions (part 2)
- Upgrading to SQL Server 2008 : Using the SQL Server Upgrade Advisor (UA)
- Windows Home Server 2011 : Using the Local Group Policy Editor (part 2) - Customizing the Places Bar
- Windows Server 2012 : Monitoring, Tuning, and Troubleshooting Hyper-V - Using Perfmon for logged monitoring
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