In this article, you will learn how to create only top or bottom rounded corners. This step-by-step guide will help you.
Steps to create it:
Drop-in a box
Set the box border radius to 15 (or any)
Set the box top padding to 15 (or at least 5-10 px)
Set the box background-color to #FF0000 (or anything)
Drop a text inside the box
Set the text background-color to #FF0000 (or anything)
Expected Result:
The top rounded border should be visible while the bottom should be covered by the text background.
Let us know if you have more questions about this!