Skip to content

Instantly share code, notes, and snippets.

@nrrrdcore
Created August 20, 2012 23:22
Show Gist options
  • Save nrrrdcore/3409171 to your computer and use it in GitHub Desktop.
Save nrrrdcore/3409171 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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
Copy link
Author

@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
Copy link
Author

@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