This question may be a year old, but I thought I'd share my fix for these. I simply had to change those thick ugly red borders.
Use the XMLFormView Web part when displaying your new web based Infopath form. There are some great tutorials on this. I think this one's very good: http://www.nickgrattan.net/Publications.aspx.
Once you have that all set up, add a content editor web part to the bottom of the same page and enter <style></style> tags into the Source editor for that web part.
Here's what I have fof the border and a few other styles I like to overwrite.
<style type="text/css">
input {
border: 1px #CCC solid;
}
.ms-WPBody td {
font-family: arial,helvetica,sans-serif !important;
font-size: 12px !important;
}
.ms-WPBody TABLE, .ms-TPBody TABLE {
font-size: 10px;
}
.ai_ {
font-family: arial,helvetica,sans-serif !important;
font-size: 12px !important;
}
.i_ {
border: medium none;
border-collapse: collapse;
table-layout: fixed;
word-wrap: break-word;
}
.d_ {
font-family: arial;
font-size: 12px;
}
.dv_ {
border:0;
}
.dt_ {
border:0;
}
</style>
The .dv_ and .dt_ classes take care of the borders. Then, in InfoPath I just add an asterisk to the outside of the field label and make it bold and red.
No more border. I hope this can help somebody out there.