Bart Bart - 2 years ago 131
Javascript Question

Border-color not working in IE

I've tried as long as I could to solve this problem before posting but I just can't get it to work.

I have a button for deleting a table row that asks for confirmation before deleting it and highlights the row with a red background/border. In Chrome and Firefox this works as it should but not in IE, the background works but the border-top/bottom don't change color.

When changing the border-color property beforehand it works, so I think the problem is in the jquery css function.

In JSFiddle I created a small example of this problem and in IE it didnt work and in Firefox/Chrome it did, then I saw a topic where they said add the border to the td. I did this and in Chrome the border stopped working on the td, and in IE the border started working on the opposite element of the td.


<table width='100%' style='border-collapse:collapse;'>
<tr style="border-top:1px solid #DDDED9; border-bottom:1px solid #DDDED9" class='tr'>

<button class='button'>Click</button>


$('.button').on('click', function(){
$('.tr').css('border-top-color', 'red');
$('.tr').find('td').css('border-bottom-color', 'red');

If someone could help me with a working solution in all three browser that would be great.

Answer Source

Define border first, then add border color.

td {
   border-bottom:1px solid transparent;

OR Add in Jquery 'border-bottom', '1px solid red'

$('.button').on('click', function(){
    $('.tr').css('border-top-color', 'red');
    $('.tr').find('td').css('border-bottom', '1px solid red');

why don't you just change the border color of tr for exampe

$('.button').on('click', function(){
    $('.tr').css('border-color', 'red');


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download