Tip 23Rounding 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 ...

Get HTML5 and CSS3, 2nd Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.