CSS borders brainteaser - html

Question

I have the following CSS that creates a blue speech bubble (JS fiddle: http://jsfiddle.net/C5N2c/:
<div class="bubble">Content</div>
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
I want to add a 1px red border around the edge of this bubble, including the small speech arrow. How can I do this? It needs to be IE8 compliant.

Answer 1

Take a look a this Fiddle, though I havent been able to test in IE8..
The CSS:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: red solid 1px;
z-index:2;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 9px 9px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -9px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 12px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -12px;
left: 24px;
}

Answer 2

See working version on jsFidde
I did it sometime ago, you can just change the colours, It's not tested on IE, I am currently on OSX and it's a mess trying to view it on IE xD
html:
<div class="dialog">
<div class="triangleOutline">
<div class="triangle"></div>
</div>
<div class="dialogBox">
Hello!<br>
I'm a full CSS fancy dialog box :D
</div>
</div>
css:
body{
font-size: 100%;
font-family: "Arimo";
background: #eee;
}
.triangle,
.triangleOutline{
position:relative;
width: 0;
height: 0;
border: solid transparent;
border-width: 7px;
border-bottom-color: #aaf;
}
.triangleOutline{left: 15px;}
.triangle{
top: -6px; /* outline's width - 1 */
left: -7px; /* outline's width */
border-bottom-color: white;
}
.dialogBox{
background: white;
border: 1px solid #aaf;
padding: 0.75em;
border-radius: 3px;
min-height: 1.5em;
line-height: 1.5em;
}
Just change the colors as you like, I guess you are not using THOSE colors right? XD

Answer 3

Try this code:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
box-shadow: 0 0 0 1px red;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -19px;
left: 21px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
See this jsfiddle.