Circle div balloon - html

Question

Here is my current css for image circle baloon
.circle-image{
width: 64px;
height: 64px;
border-radius: 50%;
background-size: contain;
background-position: center;
background-image: url("/assets/img/dashboard/img-stdn.png");
display: block;
}
And the div output as below:
How I can border the div and become like this?
Let say the image inside the div :

Answer 1

You could use a pseudo element in order to create your speech bubble triangle, as shown in the demo below.
This works by using a skew on a square, and position it absolutely within a relatively positioned container element.
Alternatively, this could be achieved with a single element if you were able to use the background-image instead of an image tag.
.circ {
height: 100px;
width: 100px;
border-radius: 50%;
bordeR: 5px solid tomato;
position: relative;
}
.circ img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 50%;
}
.circ:before{
content:"";
position:absolute;
top:10%;
right:0;
height:20px;
width:20px;
background:tomato;
transform:skewX(55deg) skewY(10deg);
}
<div class="circ">
<img src="http://i.stack.imgur.com/lCp2t.png" />
</div>
for more info in generating the triangle, you may find this quite a useful demonstration of how to achieve this triangle.
Background-image
By using a background-image instead, you can make this with only a single element.
.circ {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
border: 5px solid tomato;
background:url(http://i.stack.imgur.com/lCp2t.png);
background-size:100% 100%;
}
.circ:before{
content:"";
position:absolute;
top:10%;
right:0;
height:20px;
width:20px;
background:tomato;
transform:skewX(55deg) skewY(10deg);
z-index:-1;
}
<div class="circ"></div>

Answer 2

If you're looking for the arrow, this is what you need to add.
http://jsfiddle.net/c3Love5c/1/
.circle-image{
width: 64px;
height: 64px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-image: url("http://i.stack.imgur.com/lCp2t.png");
display: block;
border:3px solid purple;
position:relative;
}
.circle-image:before{
content:'';
display:block;
border:10px solid transparent;
border-top-color:purple;
position:absolute;
right:-5px;
top:5px;
transform:rotate(15deg);
-moz-transform:rotate(15deg);
-webkit-transform:rotate(15deg);
-ms-transform:rotate(15deg);
-o-transform:rotate(15deg);
}