thepremit.com Blog

I was browsing through Web Designer Issue 165 when I came across the article, “Style speech bubble boxes with CSS”. Remembering some projects that required rounded corners and speech bubbles, the curiosity for an unequivocal solution pressed me to try the methods suggested.

Using Will Mayo’s CSS Speech Bubbles, I made the following modifications:

• CurvyCorners -> jQuery Curvy Corners
• HTML, CSS to allow for various text length

To display a speech bubble, use this HTML:

<div class="speech_bubble">
	<div class="bubble">
		Lorem ipsum quot numquam quaerendum cum et, et vix eruditi suscipiantur.
	</div>
	<p>
		<strong>Speech Bubble</strong> using <a href="http://blue-anvil.com/download/?did=24">jQuery Curvy Corners</a>
	</p>
</div>

Do note that the CSS can be modified as per desired but if the tip image is out of alignment, use line-height for adjustment.

View Demo | Download Demo

Tested and worked in Windows environment for:

• Internet Explorer 6, 7, 8
• Firefox 3
• Chrome 4
• Safari 4