How to Make Speech Bubbles in 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.

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

The example above, will create the following effect:

To break it down, this works by:

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:

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x 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.