CSS Rounded Corners with Overflow Hidden

Have you ever needed to set rounded corners on the top and bottom of an unordered list but couldn’t figure out how?  Shouldn’t it be as simple as setting a border-radius property on the ul; unfortunately, the li’s are above the ul and will not inherit the border-radius set on the ul element. Front end developers can spend hours trying to figure out why the border-radius property (compatible in all browsers after IE8) won’t display on the parent element if the child element isn’t set, but I’m here to help.

The first time I’ve ever run into this issue, my first thought was to use the wonderful css pseudo-classes first-child and last-child. This would target the first and last li and allow me to apply a border-radius to the top of the first li and the bottom of the last li.  Unfortunately, this doesn’t work because not all browsers support the last-child property, so I had to take a different approach.

After conducting some research and talking to other developers, the overflow: hidden property became my new best friend. Creating this round-corner effect on the unordered list was as simple as setting overflow hidden to the ul itself. This property will actually hide any element overflowing the parent element.

I have found that the overflow: hidden property is a very useful yet forgetful property. Do to the lack of usage, from time to time I have actually forgotten about it amongst other useful properties, but the more experience I get developing the more I find myself remembering these little tips and tricks.