πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Make Speech Bubbles in CSS

How to Make Speech Bubbles in CSS

Ferenc Almasi β€’ 2020 December 01 β€’ Read time 1 min read
  • twitter
  • facebook
CSS

Did you know that the border-radius property in CSS can take up multiple values? This way, you can create various different effects, like speech bubbles.

Copied to clipboard!
.speech-bubble {
    border-radius: 50% 50% 0% 100% / 40% 45% 55% 60%;
}
speech-bubbles.css

The example above, will create the following effect:

To break it down, this works by:

  • Setting each border-radius value individually by the first four percentages (top-left, top-right, bottom-right, bottom-left in order)
  • This is followed by a / and four different values again for each corner to create elliptical corners.

To play around with custom border-radius values, I recommend checking out the

Fancy Border Radius Generator

How to make speech bubbles in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS

Resources:

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.