Demo

This post will take less than a minute to read.

A while back I explained how to make a speech bubble using CSS and pseudo-ele­ments. But what about if instead of giv­ing the speech bubble a drop shad­ow, we wanted to give it a border?

Normally this would­n’t be too dif­fi­cult, but due to the shape of a speech bubble—a rect­angle with a tri­angle under­neath it—it becomes more dif­fi­cult. We can eas­ily give the rect­angle a bor­der, but con­sid­er­ing the tech­nique used to cre­ate the tri­angle, also giv­ing that a bor­der isn’t possible.

Luckily, we can use pseudo-ele­ments for this, and by duplic­at­ing our tri­angle, increas­ing its size, and sit­ting it behind our ori­gin­al, we can give the appear­ance of a seam­less bor­der: http://jsfiddle.net/joshnh/26Lww/

Tweet this

6 Comments

1. Louis Bullock January 8, 2012

   So clev­er! I nev­er thought of this idea, thanks for shar­ing, Josh :)

2. Joshua Hibbert January 8, 2012

   No wor­ries Louis, I’m glad you found it useful.

3. Jakob January 8, 2012

   In case you need the tri­angle to be round, you have to do some­thing like i did here: http://jakob.cosoroaba.ro/demos/2011.12.01%20Tags/

   Take the after square, rotate it and give it a bor­der radi­us, and then if you have gradi­ents be sure to adjust them for the 45deg rotation.

4. Joshua Hibbert January 8, 2012

   Very clev­er Jakob, thanks for the tip!

5. Adam Whitcroft January 11, 2012

   Nicely done! I was try­ing to fig­ure this out a little while back and just gave up. Trust you to bring the CSS goods :)

6. Joshua Hibbert January 11, 2012

   Thanks Adam!