Sams Teach Yourself CSS in 10 Minutes

Chapter 17. Styling a Round-Cornered Box

In this lesson, you will learn how to create a flexible-width, round-cornered box using four corner images.

Setting Up the HTML Code

The HTML code for this lesson is comprised of an overall <div> container, a heading, and two paragraphs. The <div> is styled with a pullquote id, and the second paragraph is styled with a furtherinfo class as shown in Listing 17.1.

Example 17.1. HTML Code Containing the Markup for a Round-Cornered Box

<div id="pullquote">
    <h2>Heading here</h2>
    <p>
        Lorem ipsum dolor sit amet...
    </p>
    <p class="furtherinfo">
        <a href="#">More information</a>
    </p>
</div>

Creating the Illusion of Round Corners

There are many methods that can be used to create a flexible-width, round-cornered box. The ...