Simple Fix for the Webkit Clipped Border-Radius Bug

list.css

.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;
}

list.html

<div class="list-container">
  <ol>
    <li>Thing One</li>
    <li>Thing Two</li>
    <li>Thing Red</li>
    <li>Thing Blue</li>
  </ol>
</div>

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:.

@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.

@fabianperez hack all of the things, always.