Skip to content

Instantly share code, notes, and snippets.

@nrrrdcore
Created Aug 20, 2012
Embed
What would you like to do?
Simple Fix for the Webkit Clipped Border-Radius Bug
.list-container {
border-radius: 5px;
border: 1px solid #C5C5C5;
box-shadow: inset 0 1px 0 #FFF;
}
ol {
border: 1px solid transparent;
}
ol li {
margin: 0;
padding: 12px;
border: none;
border-bottom: 1px solid #CACACA;
box-shadow: inset 0 0 3px rgba(255,255,255,.3);
}
ol li:last-child {
border-bottom: none;
}
<div class="list-container">
<ol>
<li>Thing One</li>
<li>Thing Two</li>
<li>Thing Red</li>
<li>Thing Blue</li>
</ol>
</div>
@nrrrdcore

This comment has been minimized.

Copy link
Owner Author

@nrrrdcore nrrrdcore commented Aug 20, 2012

Sometimes less is more. Got sick of hacking around the border-clip problem in webkit. And most of the solutions I've found are a little heavy. So I wrote something else instead. I put the border on the list container div and I gave the ordered-list a 1px transparent border to give the container's corners some breathing room. If your list has a fixed number of list elements, you can add a .no-bottom-border class the last element instead of using the li:last-child class. You might even want to selectively round the top and bottom corners of the first and last elements to give it an even smoother look. If your list isn't fixed, use the li:last-child fix and then :squirrel:.

@nrrrdcore

This comment has been minimized.

Copy link
Owner Author

@nrrrdcore nrrrdcore commented Aug 21, 2012

@fabianperez we don't implement it this way on github.com. I actually implemented the screeshot above without rounding any corners of the list elements. So you don't actually need to do that. The transparent border around the list is what prevents the corners from bleeding. It's pretty fail-proof. And in the files above the only thing I use the last child for is to remove the border from the bottom. An easy fix for infinite lists is to just remove the border on the bottom of the container and add one to the ul.

@nrrrdcore

This comment has been minimized.

Copy link
Owner Author

@nrrrdcore nrrrdcore commented Aug 21, 2012

@fabianperez hack all of the things, always.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment