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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.