Set a thin border using .css() in javascript

Question

So I am trying to get a border around buttons on my page when the user clicks them.

To set up the handler I am going:

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

I have tried 2 ways to change the border color of the buttons in there. The first way is using the .css() function.

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

But when I do it this way, the border is really fat (I want it to be hairline, like it normally would be if I set the width to 1px)

The other way I have tried is by downloading the jquery-color plugin, and doing something like:

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

When I do that, nothing happens. There is no error - just nothing happens. But if instead of trying to change the border color, I try to change the background color, it works fine....so am I using the jquery-color wrong? For reference, here is how I would change the background:

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

like I said, that works. When I downloaded jquery-color, I only downloaded the one file (jquery-color.js), if that makes a difference....

So how do I go about getting a hairline border? (I would prefer to use the animate() method if you have anyideas how to get that to work)

I'd recommend using a class instead of setting css properties. — jrummell
– jrummell, Commented Jun 19, 2012 at 17:32

Giacomo1968 · Accepted Answer · 2025-04-09 13:27:41Z

Current Example:

You need to define border-width:1px.

Your code should read:

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

Suggested Example:

You should ideally use a class and addClass/removeClass

$(this).addClass('borderClass'); $(this).removeClass('borderClass');

And in your CSS:

.borderClass{ border-color: #C1E0FF; border-width:1px; border-style: solid; /** OR USE INLINE border: 1px solid #C1E0FF; **/ }

jsfiddle working example:

http://jsfiddle.net/gorelative/tVbvF/

jsfiddle with animate:

http://jsfiddle.net/gorelative/j9Xxa/

This just gives you an example of how it could work, you should get the idea. There are better ways of doing this most likely; like using a toggle().

Wow, that is REALLY slick. Why on EARTH does this not come up when I type "jquery change border color" or something similar into google?!?!?!?!!
+1 since I always forget this, and always have to google only to get here again, and again!!!
@gorelative why dint you simply use $(this).css({"border": "1px solid #C1E0FF"}); instead of calling all the attributes

jrummell · Accepted Answer · 2012-06-19 17:38:48Z

I'd recommend using a class instead of setting css properties. So instead of this:

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

Define a css class:

.border { border-color: #C1E0FF; border-width:1px; border-style:solid; }

And then change your javascript to:

$(this).addClass("border");

ioseb · Accepted Answer · 2012-06-19 17:32:12Z

Maybe just "border-width" instead of "border-weight"? There is no "border-weight" and this property is just ignored and default width is used instead.

Robin Pinguey · Accepted Answer · 2015-02-21 15:36:23Z

After a few futile hours battling with a 'SyntaxError: missing : after property id' message I can now expand on this topic:

border-width is a valid css property but it is not included in the jQuery css oject definition, so .css({border-width: '2px'}) will cause an error, but it's quite happy with .css({'border-width': '2px'}), presumably property names in quotes are just passed on as received.

Collectives™ on Stack Overflow

Set a thin border using .css() in javascript

4 Answers 4

Current Example:

Suggested Example:

6 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Current Example:

Suggested Example:

6 Comments

Comments

Comments

Comments

Linked

Related