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>

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