How to make rounded corner or bubble speech text area using CSS?

[hish84]

Hi All,

Can we use CSS to make rounded corner or bubble speech text area using CSS?

I already have my application generating code to show a rectangle, and I want it to look more appealing.

Any suggestions are welcome

[phaedrusGhost]

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

the -moz-border-radius: 15px; is for firefox so you will need to adjust both pixel ratios to be seen in all browsers.

[sv3tli0]

I can add and

-webkit-border-radius:15px;

those 3 are all possible css elements for round corners

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius:15px;
}

[ko ko]

IE9 and minor version cannot support CSS3. There is some technique for IE with CSS3. Check out here http://css3pie.com/documentation/product-comparison/

[phaedrusGhost]

please mark this thread solved if we've given you the answer you were looking for...

[AbhishekBiswal]

You can use css3 border-radius like this:

#test
{
border-radius:24px; /* Makes all the corners rounded (24px) */
border-radius:24px 0px 24px 0px; /* Makes only The First and The Third corner rounded. */
}

The Sides are like this:

A---------------B
-----------------
-----------------
C---------------D

and the code goes like this: border-radius: Apx Bpx Dpx Cpx;

Hope your problem is solved.