jQuery UI sortable border bottom on drag

I have a working jQuery UI sortable. Around every item is a border but to prevent a double border between the items I've removed the border bottom on the items. Instead I added a border bottom on the container.

http://jsfiddle.net/6oxdwb6g/1/

While it looks correct it first sight, it does not work well when starting to drag the elements. At that point it shows that the item has no border bottom. How can I both have a border around the item on drag and at the same time prevent a double border when not dragging?

html

<ul id="sortable">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

css

#sortable { 
    list-style-type: none;
    margin: 20px;
    padding: 0;
    border-bottom: 1px solid #ddd;
}

#sortable li {
    border: 1px solid #ddd;
    border-bottom: none;
    padding: 20px;
}

js

$(function() {
  $( "#sortable" ).sortable();
 });