How can I hide the light blue bottom border on Web Part headers (on hover) and the border around the active Web Part?

Question

The bottom border only occurs on hover. The active Web Part has a full border that I'd like to remove. I've tried the following styles to no avail:

.s4-wpActive 
{
    border: none;
}

tr.ms-WPHeader td
{
   border-color: transparent;
}

.ms-WPHeader, .ms-WPHeader td, .ms-fakewptitle , .s4-wpTopTable
{
    border-bottom:0px none transparent;
}

.ms-wpTdSpace, .ms-WPHeaderTd, .ms-WPHeaderTdMenu, .ms-WPHeader td
{
    border-bottom:0px none transparent;
    padding:0px;
} 

Answer 1

James, what Sig posted works for both things that you are looking for. The only change I would suggest would be to omit the use of !important in the style statements. You want to try to avoid using that as much as possible.

/* Hide web part title border on hover */
.s4-wpcell:hover .ms-WPHeader td, 
.s4-wpActive .ms-WPHeader td, 
.s4-wpcell .ms-WPSelected .ms-WPHeader td {
    border-bottom: 1px solid transparent;
}

/* Hide web part container border in edit mode */
.s4-wpActive .s4-wpTopTable, 
.s4-wpActive .ms-WPSelected {
    border: 1px solid transparent;
}

Answer 2

The following CSS worked for me.

To hide the active Web Part border:

.s4-wpActive .s4-wpTopTable, .s4-wpActive .ms-WPSelected 
{
    border: none !important;
}

To hide the Web Part title bottom border on hover:

.s4-wpActive .ms-WPHeader td, .s4-wpcell:hover .ms-WPHeader td
{
    border-bottom: 1px solid transparent !important;
}

Note the use of !important, otherwise the SharePoint builtin JavaScript might override the changes.