Using CSS3

CSS3 ships with long-awaited properties, border-radius and box-shadow, that simplify old and tedious methods that were used to present rounded corner and drop shadow in HTML. On top of that, it also brings a new type of pseudo-element that enables us to style the placeholder text shown in input fields through the HTML5 placeholder attribute.

Let's take a look at how they work.

Creating rounded corners with CSS3

Back in the 90s, creating a rounded corner was complicated. Adding a pile of HTML markup, slicing out images, and formulating multiple line style of rules is inevitable, as presented in the post by Ben Ogle at http://benogle.com/2009/04/29/css-round-corners.html.

CSS3 makes it much simpler to create rounded corners with the border-radius property, and the following is an example:

div {
  width: 100px; height: 100px;
  border-radius: 30px;
}

The preceding style rule will round the box corner (read the A word on CSS Box Model section in Chapter 1, Responsive Web Design)...