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%;
}

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

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The border-radius property in CSS