How can I make a CSS only speech bubble with a border?

Question

I want to make a CSS only speech bubble. So far, I have this...

Example

CSS

div {
    position: relative;
    background: #fff;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

div:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -60px;
    margin-left: -15px;
    border-width: 30px 20px 30px 20px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

jsFiddle.

...which is almost exactly what I want. However, I want a light border around the whole thing.

Obviously, on the main portion, that is simple as adding border: 1px solid #333 to the div.

However, as the tail of the bubble is a border hack, I can't user a border with it.

I tried setting a box shadow of 0 0 1px #333 but browsers apply the border to the rectangular shape of the element (which I guess is what they should do).

jsFiddle.

My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with text-shadow for the border and using z-index of the main bubble to hide the top shadow of the text.

What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?

I only have to support Mobile Safari. :)

Answer 1

<div>Hello Stack Overflow!<span></span></div>

div span:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -51px;
    margin-left: -15px;
    border-width: 20px 20px 30px 20px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

http://jsfiddle.net/QYH5a/

Answer 2

For the Unicode character approach you suggested, the most appropriate would be ▼ U+25BC BLACK DOWN-POINTING TRIANGLE. I don't know whether iOS has glyphs for it.

Answer 3

Here is a similar solution:

http://jsfiddle.net/JyPBD/2/

<div>Hello Stack Overflow!<span></span></div>

body {
   background: #ccc;   
}

div {
    position: relative;
    background: #fff;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #333;
}
div:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -60px;
    margin-left: -16px;
    border-width: 30px 20px 30px 20px;
    border-style: solid;
    border-color: green transparent transparent transparent;

}

div span
{
    border-color: #FF0000 transparent transparent;
    border-style: solid;
    border-width: 25px 15px;
    bottom: -51px;
    margin-left: -65px;

    position: absolute;
    z-index: 10;
}

Answer 4

You could use the filter property with box-shadow() to do it...

-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);

jsFiddle.