Tip 23
Tip 23. Rounding Rough Edges
On the Web, everything is a rectangle by default. Form fields, tables, and even
sections of web pages all have a blocky, sharp-edged look, so designers have
turned to different techniques over the years to add rounded corners to these
elements to soften up the interface.CSS3 has support for easily rounding corners, and Chrome, Firefox, and
Safari have supported this for quite a long time. Internet Explorer 9 introduced
support as well, so you can easily add this feature to your designs without
much worry. Let’s see how it’s done.Softening Up a Login Form
We’ve been asked to create a new login form for the AwesomeCo customer
portal and support site. The wireframes and mock-ups we received from the
designer show form fields with rounded corners. Let’s round those corners
using only CSS3 first. Our goal is to create something that looks like the fol-
lowing figure.Figure 25—Our form with round corners
For the login form, we’ll use some simple HTML.
css3_rough_edges/index.html
</head>
<body>
<formclass="login"action="/login"method="post">
<fieldset>
<legend>ExistingUsers</legend>
<ol>
<li>report erratum • discussRounding Rough Edges • 153
Download from Wow! eBook <www.wowebook.com>