gistfile1.css

/**
 *　Pure CSS speech bubbles
 *　@see http://nicolasgallagher.com/
 *
 *
 */

/* Oval thought buble (empty, with border)
------------------------------------------ */

.oval-thought-border {
	position:relative; 
	padding:70px 30px;
	margin:1em auto 80px;
	border:10px solid green; 
	text-align:center;
	color:#333; 
	background:#fff;
	
	/* css3 */
	/*
	NOTES:
	-webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
	Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
	*/
	-webkit-border-top-left-radius:240px 140px;
	-webkit-border-top-right-radius:240px 140px;
	-webkit-border-bottom-right-radius:240px 140px;
	-webkit-border-bottom-left-radius:240px 140px;
	-moz-border-radius:240px / 140px;
	border-radius:240px / 140px;
}

/* creates the larger circle */
.oval-thought-border:before {
	content:"\00a0"; 
	position:absolute; 
	z-index:10; 
	bottom:-40px; 
	right:100px; 
	width:50px; 
	height:50px;
	border:10px solid green;
	background:#fff;

	/* css3 */
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	border-radius:50px;
}

/* creates the smaller circle */
.oval-thought-border:after {
	content:"\00a0"; 
	position:absolute; 
	z-index:10; 
	bottom:-60px; 
	right:50px; 
	width:25px; 
	height:25px; 
	border:10px solid green;
	background:#fff;

	/* css3 */
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius:25px;
}

html

<div style="width:430px;">
<blockquote class="oval-thought-border">
				<p>IEでは、新しい姿は見えんぞ</p>
<p>CSS3は丸いぞ 　？あれ</p>
<a href="http://nicolasgallagher.com">Nicolas Gallagher</a>
</blockquote>
</div>