Установите тонкую рамку с помощью .css() в javascript

Итак, я пытаюсь получить рамку вокруг кнопок на моей странице, когда пользователь нажимает на них.

Чтобы настроить обработчик, я собираюсь:

$(".reportButtons").click(function(){ //change border color });

Я попробовал 2 способа изменить цвет границы кнопок. Первый способ — использовать функцию .css().

$(this).css({"border-color": "#C1E0FF", 
             "border-weight":"1px", 
             "border-style":"solid"});

Но когда я делаю это таким образом, граница становится очень толстой (я хочу, чтобы она была тонкой, как обычно, если я устанавливаю ширину в 1 пиксель)

Другой способ, который я пробовал, это загрузка jquery-color и делаю что-то вроде:

$(this).animate({borderTopColor: "#000000"}, "fast");

Когда я это делаю, ничего не происходит. Ошибки нет - просто ничего не происходит. Но если вместо того, чтобы пытаться изменить цвет границы, я пытаюсь изменить цвет фона, он работает нормально ... так что я неправильно использую цвет jquery? Для справки, вот как я изменил бы фон:

$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');

как я уже сказал, это работает. Когда я загрузил jquery-color, я загрузил только один файл (jquery-color.js), если это имеет значение....

Итак, как мне получить тонкую границу? (Я бы предпочел использовать метод animate(), если у вас есть идеи, как заставить его работать)