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%;
}Copied to clipboard!
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
Resources:
Remove ads
Want to get weekly updates to your mailbox? 📬
📚 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
