Canto arredondado e diálogo

Bom dia pessoal,

Estou co seguinte probelma, preciso fazer uma caixa de diálogo, como um balãozinho com a ponta dele, nao estou conseguindo solucionar... ja tentei de tudo um pouco... segue o código:

 <div class="infoAzul">
 <div class="infoAzulTopoEsq">
 <div class="infoAzulBaseEsq">
 <div class="infoAzulBaseDir">
 <div class="infoAzulTopoDir">
 <div class="infoAzulConteudo">

 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

CSS

/ Caixa azul de explicação /

.infoAzul{
display:none;
z-index:9999;

}

.infoAzul .infoAzulTopoEsq{

background: #000000 url(../img/guia_configuracoes/box_info_cto_sup_esq.gif) no-repeat bottom left;
height:4px;
width:7px;
display:inline-block;
border: solid 1px #000000;
}

.infoAzul .infoAzulTopo{

height:4px;
float:left;
display:inline-block;
background: #0077cb;
}

.infoAzul .infoAzulTopoDir{

background:url(../img/guia_configuracoes/box_info_cto_sup_dir.gif) no-repeat bottom left;
height:4px;
width:7px;
display:inline-block;
}

.infoAzul .infoAzulConteudo{

background:#0077cb;
color:#FFFFFF;
height:auto;
width:auto;
padding-left: 1px;
float:left;
}

.infoAzul .infoAzulBase{

background:url(../img/guia_configuracoes/box_info_base.gif) no-repeat top left;
height:13px;
width:100%;
float:left;
}