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.
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) each for...