Four Rounded Corners

For the second row, we need a way to apply rounded corners on both the top and bottom, all the while keeping the row vertically expandable. To accomplish this, we’ll use two background images. One of them will be the same image we used for the bottom of the top row; the other (for the top edge) will be the same image again but turned upside-down. Because we need two background images, we also need two elements to assign them to. (Oh, how I wish we could assign more than one background image to a single element. One can dream.)

Lucky for us, we do have two elements to take advantage of. Notice that in the markup for the second row we have a containing <div> with a <p> inside for the content within: