How do I manipulate the CSS of the current Object

Question

I am looking for a piece of code that lets me change the CSS of the clicked Object, like so:

//Click & Lock
 $('.pix').click(function(){
  if(questionLock==false){questionLock=true;    
    //correct answer
  if(this.id==rnd){
   $(this).css('border-color:green'); 
   score++;
   }
    //wrong answer  
  if(this.id!=rnd){
   $(this).css('border-color:red');
  }
  setTimeout(function(){changeQuestion()},1000);
 }})
}   

Answer 1

You need css('key', 'value') overload of jQuery.css

$('.pix').click(function() {
    if (questionLock == false) {
        questionLock = true;
        //correct answer
        if (this.id == rnd) {
            $(this).css('border-color', 'green');
            score++;
        }
        //wrong answer  
        if (this.id != rnd) {
            $(this).css('border-color', 'red');
        }
        setTimeout(function() {
            changeQuestion()
        }, 1000);
    }
})

Answer 2

First and foremost, you shouldn't be manipulating CSS directly. Change the border color by adding/removing class names, and styling those classes in your external CSS.

If you really want to change the CSS with JavaScript, you need to give it a property and value, not a single string:

$(this).css('border-color', 'red');