CSS jQuery Border

Question

Ok, so I made a little script that I use to change the border of a div, but it doesn't 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 +");"); } 

The output that Iam gets from console.log is tho correct

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

But there are no effects on the page, the border does not change, or something as such.

I also tried checking the item to see if there are any changes or not, but it seems that there are no changes at all

EDIT:

Just to add, 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 a 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 resolved:
1. At the end of the border value, an additional half-color was added.
2. After the border key there was extra space (it was border ).

Answer 2

The semicolon ( ; ) is not a valid css value. What do you have in your last meaning,

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

So, your current code,

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

Update it,

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

Example

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