For years developers struggled to present layouts with round corners, often populating nested tables with images to accomidate the page design across several different browsers. Today, this problem has been addressed using standard CSS and we are able to take advantage of these advantages to stylize content for our microsites without the use of images and tables.
In this example we will create an input field with rounded corners for use in iPhone’s MobileSafari. To accomplish this we will use the “-webkit-border-radius” css property. Here’s an example:
<style type=”text/css”>
.foo {
font-family: Verdana; font-size: 40px;
color: black;
-webkit-border-radius:25px;
background:#F2FFE1;}
</style>You can then specify this class for any input field, as shown below:
<input type=”text” name=”name” size=”20″ class=”foo” value="import" />As you see, we specify a value of 25 to the -webkit-border-radius property which is then applied to a page element.
In this example, the resulting input field looks like this…..
This example can easily be extended to create rounded corners to stylize other page elements. Be sure to review the property support, as it’s not compatible with some desktop browsers. Nonetheless, I feel it’s one of the most useful CSS properties you can take leverage when developing content for MobileSafari on the iPhone, or any other platform for that matter. Let me know what you think.
