O'Reilly logo

Sams Teach Yourself CSS in 10 Minutes by Russ Weakley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required