Borders and border-radius/hover state questions
Anonymous# October 5, 2012 at 5:27 pm
I’m not really sure how to explain this, but you can see what I’m asking on CodePen below.
Is there a CSS way to remove the bottom border of the last list item, without adding a class to the li tag? Also, how do you make the hover state follow the border-radius?
Sorry for the bad question structure, but it’s easier just to look at it and see what I mean than it is to try to explain it! Thanks =P
>[CodePen Example](http://codepen.io/msguerra74/pen/yzaoi)Anonymous# October 5, 2012 at 6:04 pm
I’ve done it before with a class, but I don’t like adding to the markup like that. I also try to, at least, support IE8+, so I’m not sure which is better. I tried using the same idea to fix the hover state from extending beyond the border-radius by adding ‘first/last-of-type’, but it doesn’t seem to work right. I’m thinking I’m just missing something obvious, but my brain is in Friday mode apparently…Anonymous# October 5, 2012 at 7:08 pm
The corners of the hover color are protruding outside of the rounded corners. Thanks for the other info.Anonymous# October 5, 2012 at 8:06 pm
I added a mix of the suggestions and got it working. I even took away the ul styling for fun! I really like the idea of the first/last-of-type, I just wished it worked at least in IE8 because I don’t like adding classes for weird things like that. Oh well, I wish the whole IE thing wasn’t even an issue, but it is…
You must be logged in to reply to this topic.