Maintaining rounded corners when the height is less than twice the border radius?

Question

In Qt you can use CSS stylesheets to give a QWidget a rounded corner:

QWidget#myWidget {
    background-color: #ffbb33;
    border-radius: 20px;
}

I wanted to animate this QWidget to show it popping up from the bottom of the screen to notify the user, but found that when the height of the widget is less than the border radius, the rounded edges jarringly disappear.

Is it possible to prevent this?

Update: I appreciate everyone's web related solutions to this problem. Most of them actually do translate pretty well to this application. But I do just want to point out that this application is coded in C++ with Qt libraries. If you have other web-related solutions, please do post them, but be aware that if you're using web technologies to do this, then "It works for me" isn't exactly applicable in this case. ;)

Answer 1

Why not just set the bottom CSS property to its negative height, and then animate the bottom property to 0, rather than height? See this fiddle for an example. This way you don't have to mess with the height of the element, and there won't be any weird squishing of the content, either.