Set a thin border using .css() in javascript

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()

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");

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.