Jquery CSS border

Question

Alright so I've made a small script that I use to alter the border of a div but it doesnt seem to work

This is my code

function changeBorderType(px, rr, gg, bb) {
        $("#colorBox").css({"border":  px+"px "+ getBorderType() +" rgb("+ rr +","+ gg +","+ bb +");"});
        console.log("border: " + px+"px "+ getBorderType() +" rgb("+ rr +","+ gg +","+ bb +");");
    }

Output that Iam getting from the console.log is correct tho

border: 1px solid rgb(231,212,164);

But on the page there are no effects at all, the border doesnt change or anything as such.

I also tried inspecting the element to see if there are any changes or so but it seems there aint no changes at all

EDIT:

Just to add up, this is my current CSS (default one)

#colorBox {
    width: 40%;
    height: 80%;
    background-color: rgb(0,0,0);
    display: inline-block;
    margin-top: 20px;
    border: 1px solid rgb(136,104,121);
}

Answer 1

Here is the fix, based on your jsfiddle:

var pixelsSet = 5;
var red = 10;
var green = 122;
var blue = 155;

changeBorderType(pixelsSet, red, green, blue);

function changeBorderType(px, rr, gg, bb) {
  $("#box").css({"border":  px+"px " +" solid "+ "rgb("+ rr +","+ gg +","+ bb +")"});
  console.log("border: " + px+"px "+" solid "+" rgb("+ rr +","+ gg +","+ bb +")");
}

#box {
  width: 50px;
  height: 50px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">

</div>

Problems solved:
1. There was an extra semicolor at the end of the border's value.
2. There was an extra space after the border key (it was border).

Answer 2

Semicolon (;) is not a valid css value. Which you have in your last value,

1px solid rgb(231,212,164);

So, your current code,

"border":  px+"px "+ getBorderType() +" rgb("+ rr +","+ gg +","+ bb +");"

Update it to,

"border":  px+"px "+ getBorderType() +" rgb("+ rr +","+ gg +","+ bb +")"

Sample,

$(function() {
  var style1 = "1px solid rgb(231,212,164);";
  var style2 = "1px solid rgb(231,212,164)";

  $('#previousColorBox').css({
    'border': style1
  });

  $('#colorBox').css({
    'border': style2
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="previousColorBox">
  My Previous Color Box
</div>

<div id="colorBox">
  My Color Box
</div>