remove rounded borders on link images in footer

remove rounded borders on link images in footer

i've spent a day on this now

(css is the original css file)

i have a simple footer:

<div data-role="footer" class="ui-bar" data-position="fixed" align=center   data-theme="a">
    <a href="index.php" rel=external><img src="images/nav-home.png" width="37" height="37" /></a>
    <a href="projects.php"  rel=external><img src="images/nav-projects.png" width="37" height="37" /></a>
    <a href="all-cats.php"  rel=external><img src="images/nav-estate.png" width="37" height="37" /></a>
    <a href="contact.php" data-rel="dialog"  data-transition="pop"><img src="images/nav-contact.png" width="37" height="37" /></a>
</div>

on the images there is a bottom rounded border which looks like its set in the background but i cannot for the life of me find where i can get rid of it in the css  (a normal image without a link shows fine

ive changed :
.ui-mobile a img, .ui-mobile fieldset, .ui-bar a img { padding:0px; border: 0px; background: none; background-color: transparent; background-image: none;}