css rounded shape for comment

This is round shaped comment area. The width, height and border-radius properties form an ellipse shape.

<style>
.round-comment{
width:200px;
height:180px;
border-radius:50%;
background:lightgreen;
text-align:center;
position:absolute;
font-size:15px;
}
.round-comment::after{
position:absolute;
content:"";
border-top:40px solid lightgreen;
border-right:30px solid transparent;
top:155px;
left:40px;
}
</style>

<div style="height:300px; width:100%; float:left;">
<div class="round-comment">
 <p>This is <br> comment container.<br> It may be used on <br> input elements.</p>
</div>
</div>

The best thing about the learning is the way you think and not the destination.

<style>
.round-comment{
 width:200px;
 height:180px;
 border-radius:50%;
 background:lightgreen;
 text-align:center;
 position:absolute;
 font-size:15px;
}
</style>

Now we will use the simple '::after' pseudo class with the .round-comment class.

<style>
.round-comment::after{
 position:absolute;
 content:"";
 border-top:40px solid lightgreen;
 border-right:30px solid transparent;
 top:155px;
 left:40px;
}
</style>

position:absolute property positions the ::after with respect to the .comment-round class element.

top:95px means the top side of '::after' is 95px away from top side of .comment-round class element.

left:30px means the left side of '::after' is 30px away from left side of .comment-round class element.

In the above example, the border properties make a triangular shape.