CSS 3 - rounded corners in after and before states

Question

I have a little problem with CSS 3, namely I would create such an object with a single item. Here's an image of what I want to achieve:

Here's what have I:

CSS:

body{
background:grey;
    padding:10px;
}
#talkbubble {
margin:0 auto;
box-shadow: 3px 10px 7px #deefe5;
   width: 590px;
   height: 160px;
   background: white;
   position: relative;
   border-radius:10px;
   border-bottom-left-radius:0px;
}
#talkbubble:before {
box-shadow: 10px 10px 5px #deefe5;
   content:"";
   position: absolute;
   background:white;
   top: 100%;
   width: 228px;
   height: 62px;
   border-bottom-left-radius:         10px;
   border-bottom-right-radius:         10px;

}
#talkbubble:after{
   content:"";
   position: absolute;
   top:100%;
   left:228px;
   border-top: 10px solid white;
   border-right: 10px solid transparent;
   background:white;


}​

HTML:

<div id="talkbubble"></div>​

And a jsFiddle demo

How do I round off the angle between the two parts?

Answer 1

Taken information from here you can get this:

body
{
    background:grey;
    padding:10px;
}
#talkbubble 
{
    margin:0 auto;
    box-shadow: 3px 10px 7px #deefe5;
    width: 590px;
    height: 160px;
    background: white;
    position: relative;
    border-radius:10px;
    border-bottom-left-radius:0px;
}
#talkbubble:before 
{
    box-shadow: 10px 10px 5px #deefe5;
    content:"";
    position: absolute;
    background:white;
    top: 95%;
    width: 228px;
    height: 62px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
}
#talkbubble:after
{
   content:"";
   position: absolute;
   top:100%;
   left:228px;
   background:-webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 10px, white 10px);
   width: 10px;
   height: 10px;
}​

http://jsfiddle.net/uCRMQ/2

//Just the background shadow doesn't work. Now background shadow works for this (at this size).

Lg
warappa

Answer 2

Short answer: you can't.

What you've done there has successfully created a box :after the DIV element, but if you start to enter text into the DIV it will not "flow" into the bottom section.

To achieve what you're aiming for in CSS3 you would need at least 3 DIVs and transparency effects, and you still would have the problem with text overflowing.