As you can see I have a blue border on the right of he main message, but I cannot figure out a way to get the blue border on the arrow as well. If at all possible I would really like to avoid using an image. It would be great to find a CSS only solution.

I have thought about trying to use the

:before

sudo element but I can't get the full control I need.

Any help would be greatly appreciated.

UPDATE

I have managed to find a solution, but to be honest it is not very clean.

What I have done is add a new element which is the width of the border and has the same background colour. I then set the height to slightly less than the height of the CSS arrow. I then give my new element a CSS arrow the background colour of the border.