JQueryMobile Listview border bottom and border top

JQueryMobile Listview border bottom and border top

I am working on JqueryMobile listview, before this i has problem with there is a slight gap which is causing the border bottom and border top to appear as a 2px width border instead of 1px. I manage to fix it with 

  1. margin-bottom: -1px !important;
my goal is to make it as dotted line between the border bottom and border top. Thanks


my html code
  1. <div data-role="fieldcontain"> <ul data-theme="f" data-role="listview" data-inset="false" id="listview"></ul> </div>
my css
  1. .ui-btn-up-f { border: 1px solid #bbb /*{f-bup-border}*/; margin-bottom: -1px !important; /* border-bottom: 1px dashed #bbb; */ background: #ffffff /*{f-bup-background-color}*/; font-weight: normal; color: #333 /*{f-bup-color}*/; text-shadow: 0 /*{f-bup-shadow-x}*/ 1px /*{f-bup-shadow-y}*/ 0 /*{f-bup-shadow-radius}*/ #fff /*{f-bup-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #ffffff /*{f-bup-background-start}*/), to( #ffffff /*{f-bup-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #ffffff /*{f-bup-background-start}*/, #ffffff /*{f-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #ffffff /*{f-bup-background-start}*/, #ffffff /*{f-bup-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #ffffff /*{f-bup-background-start}*/, #ffffff /*{f-bup-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #ffffff /*{f-bup-background-start}*/, #ffffff /*{f-bup-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #ffffff /*{f-bup-background-start}*/, #ffffff /*{f-bup-background-end}*/); }