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)
 
 
REVIEW
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox
VIDEO TUTORIAL
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Most View
- Exchange 2007: How Do I Modify a Database Size Limit?
- Windows 7 : Enhancing Your Browsing Security (part 1) - Blocking Pop-Up Windows
- Enable the Global Audit Policy by Using the Command Line
- Windows Phone 7 : Updating Your Phone Software
- SOA with .NET and Windows Azure : WCF Discovery (part 1) - Discovery Modes
- Microsoft ASP.NET 3.5 : WCF Services for ASP.NET AJAX Applications
- Securing Windows 7 : Thwarting Snoops and Crackers (part 2) - Locking Your Computer Manually, Automatically
- Windows 7 : Accessing a Shared Printer
- SQL Server 2008 : Data Encryption - SQL Server Key Management
- Windows 7 : Firing Up the Registry Editor