Member Avatar for 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

  • 5 Contributors
  • 5 Replies
  • 332 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by AbhishekBiswal

Dani AI

Generated

Short, practical update that builds on the replies from , , , and .

Rounded corners are a simple CSS job, but a speech "bubble" needs a tail and a couple of small layout details. A lightweight, modern pattern is to use a single element for the bubble and a positioned pseudo-element for the tail — that keeps markup minimal and makes them easy to theme. The pseudo-element should share the bubble background and shadow so seams don't show; if a visible border is needed, use a second pseudo-element behind the first to draw the border.

Example (HTML + CSS):

<div class="bubble">This is the message text inside a rounded bubble.</div>
.bubble {
  display: inline-block;
  position: relative;
  padding: 12px 16px;
  max-width: 70%;
  background: #e7f3ff;
  color: #0b2030;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* rounded tail: rotated square, matches background and shadow */
.bubble::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

If pixel-perfect scaling or complex tails are required, use an inline SVG (rect with rx for rounded corners + path or polygon for the tail) so the shape scales cleanly on any resolution. For older IE support, consider proven polyfills (for example CSS3 PIE) or fall back to square tails.

Quick troubleshooting notes: if a 1px border shows a hairline at the tail join, draw the border in a ::before layer and the fill in ::after; use identical shadows on both layers to hide seams. For non-rectangular or animated tails, SVG or clip-path gives the cleanest result. Finally, keep contrast and readable padding so the bubble remains accessible.

Recommended Answers

All 5 Replies

Member Avatar for 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.

Member Avatar for 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;
}
Member Avatar for phaedrusGhost

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

Member Avatar 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.

Edited by AbhishekBiswal because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.