Rounded corners pull-quote using CSS

Date: 7 May 2006
Author: Russ Weakley

There are many methods that can be used to create a flexible round-cornered box. This example uses our individual “round corner” images. These images are not placed in the HTML markup. They are applied as background images to different elements using CSS.

The top left corner image will be applied to the <div> element.
The top right corner image will be applied to the <h2> element.
The bottom left corner image will be applied to the second <p> element.
The bottom right corner image will be applied to the <a> element, inside the second <p>.

See the diagram below:

diagram showing all images inside HTML markup

Here are the images used in this example:

There may be times when you do not have all of these elements to use for placing the four corners. In this case, you may need to use nested <div> elements. However, always try to use existing HTML markup first, before adding possibly unnecessary additional markup.

Step 1. Setting up the HTML code

The code we will be using comprises of a <div> wrapped around an <h2> and two <p> elements. Inside the second <p> element, there is an <a> element:

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

Step 2. Setting up the selectors

To style the round cornered pullquote you will need 5 different selectors. As you can see, the first selector is for the parent <div>. The others are descendant selectors – they select descendants (in this case children) of the <div>:

div#pullquote {...}
div#pullquote h2 {...}
div#pullquote p {...}
div#pullquote p.more {...}
div#pullquote p.more a {...}

Step 3. Styling the <div> element

We will style two properties of the <div> element. First, we will add some margin around the entire <div>. Then we will apply a background image to the <div>, making sure we also specify a background colour.

div#pullquote
{
	margin: 2em;
	background: #09f url(pullquote-a.gif) no-repeat;
}

This will give the following result:

Example 1

Step 4. Styling the <h2> element

Next, we need to style the <h2> element. By default, <h2> elements have margin above and below. We do not want this margin as we need the <h2> sitting tightly into the top left corner of the <div>. We can remove the margin using margin: 0;.

We want to push the text away from the top corner of the box, and this is achived using padding.

Then we are ready to add the bakcground image into the <h2> element. We will use background-position of “100% 0″ which will put the image in the top right corner of the <h2>.

div#pullquote h2
{
	margin: 0;
	padding: 20px 20px 0 20px;
	background: url(pullquote-b.gif) no-repeat 100% 0;
}

This will give the following result:

Example 2

Step 5. Styling the <p> element

The <p> elements will be given padding on the left and right sides:

div#pullquote p
{
	padding: 0 20px;
}

This will give the following result:

Example 3

Step 6. Styling the .more class

Now, we will focus on the second <p> element, which has a class of “more”. We don’t want padding around the content this time, just on the left side:

Then, we can place a background image into the bottom right corner of the <p> element.

div#pullquote p.more
{
	padding: 0 0 0 20px;
	background: url(pullquote-c.gif) no-repeat 0 100%;
}

This will give the following result:

Example 4

Step 7. Styling the <a> element

Finally, we need to place the last round corner image inside the <a> element. As this is an inline element, we need to converti is to "display: block". We need to add padding to the right edge. We can align the text to the right, and then add the image. This time the background-position is set to 100% 100% – which will place it on the bottom right corner of the element.

div#pullquote p.more a
{
	display: block;
	padding: 0 20px 20px 0;
	text-align: right;
	background: url(pullquote-d.gif) no-repeat 100% 100%;
}

This will give the following result:

Example 5

All CSS combined

div#pullquote
{
	margin: 2em;
	background: #09f url(pullquote-a.gif) no-repeat;
}

div#pullquote h2
{
	margin: 0;
	padding: 20px 20px 0 20px;
	background: url(pullquote-b.gif) no-repeat 100% 0;
}

div#pullquote p
{
	padding: 0 20px;
}

div#pullquote p.more
{
	padding: 0 0 0 20px;
	background: url(pullquote-c.gif) no-repeat 0 100%;
}

div#pullquote p.more a
{
	display: block;
	padding: 0 20px 20px 0;
	text-align: right;
	background: url(pullquote-d.gif) no-repeat 100% 100%;
}

Update October 2009: Is there an easier way?

The answer is yes, if you are happy for the corners to appear only in browsers that support the CSS3 property – border-radius.

Mozila/Firefox, Safari 3 and Chrome 4.0 have implemented this property, which allows you to create round corners on elements without the need for any images. Assuming the round corners were not critica to the design (ie they can fail gracefully in older browsers that do not support this property), you could use the following CSS:

div#pullquote
{
	margin: 2em;
	padding: 20px;
	background: #09f;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

div#pullquote h2
{
	margin: 0;
}

div#pullquote p.more
{
	margin: 0;
	text-align: right;
}

Note that there are two vendor specific CSS properties included in the rule set.

-moz-border-radius: 20px – for Mozillas-based browsers
-webkit-border-radius: 20px – for Safari and other Webkit-based browsers

Below these two vendor properties is the actual CSS3 property – border-radius: 20px – which should always be placed after any vendor specific properties.

Site navigation