+1
Completed

Inheriting rounded corners

thillsman 7 years ago updated 7 years ago 2
I'm about 90% sure this is a feature request. I'm 10% sure I just didn't get it to work...

So, rounded corners. They look gorgeous on some things, but I've noticed that elements inside of a panel with rounded corners don't inherit them. For example, I tried to make an app with slightly rounded corners (Mailbox, Foursquare, and Tweetbot all have them, among others). So I set my corner radius of 3 or whatever on my all-encompassing container panel. However, I noticed that any other panel that reached corners (such as a title bar with a width of 100% at the top of the page) stuck it's sharp corners all the way to the top left and top right of the screen. Easy enough, I changed the cornerradius of the title bar and we're all good (assuming I don't care if my bottom title bar corners are rounded). But if I have a pager taking up the bottom 50% of the screen, I can round my pager corners, but then it's just covered up by the sharp corners on my children panels, and if I round those corners I've got round rects everywhere.

So basically, I'm used to CSS's handling of cornerradius, where it cuts off the sharp corners of whatever elements are inside a container. Can I request this or is there there a way to fix it that I'm not thinking of?
You should be able to add clip="yes" to your "all-encompassing container panel" and any child should crop to the bounds of your cornerradius.
As usual, I'm 90% wrong. :) That's awesome! Thanks, Ian!