css jquery question

[Mike]

My example:$('something').css('border-radius':'10px 10px 10px 10px');
My example doesn't work any suggestions? My browser is FF.

[Wormopolis]

If they are all the same just put 10px once

[Peter]

When passing 2 parameters to the "css" method, you need to separate them by a comma not by a colon.


$("something").css("border-radius", "10px");

You also need to specify a border width and colour, otherwise it will appear like nothing happened.


$("something").css("border-radius", "10px");
$("something").css("border-width", "4px");
$("something").css("border-color", "#000")

You can then shorten that down by chaining...


$("something").css("border-radius", "10px").css("border-width", "4px").css("border-color", "#000");

Or you can pass an object where the key is the CSS property...


$("something").css({

"border-radius": "10px",
"border-width": "4px",
"border-color": "#000"

});

[Wormopolis]

I think color is optional, is it not?

[Peter]

If no colour is specified, I think it inherits it from the parent element.

Edit:  Yeah it does.  I wasn't 100% sure on how the inheriting works, but from what I tried, it uses the parent element text colour.

Edit again:  developer.mozilla.org/en-US/docs/Web/CSS/border-color

[Mike]

Thanks guys that's helpful
If the color is not mention (like border-color: inherit or nothing) it'll take on the parent? Do I even have to include border-color:?

[Peter]

Mike,

No, you can leave it out, I included it to provide a complete example.

[Mike]

Peter,
That didn't work  ('.left-panel').css("border-radius","10px"); any other suggestions?

[Wormopolis]

put a width as well.

[Mike]

Wormopolis,
 That didn't work either. This is what I have.
$(".left-panel").css({

"border-radius": "20px",
"border-width": "100px",
"border-top":"2px solid #fff",
"border-bottom":"2px solid #fff",
"border-left":"2px solid #fff",
"border-right":"2px solid #fff",
});

Any more suggestions?

[Peter]

Test it in the console when viewing this topic, works fine.

$(".message").css({

"border-radius": "20px",
"border-width": "100px",
"border-top":"2px solid #fff",
"border-bottom":"2px solid #fff",
"border-left":"2px solid #fff",
"border-right":"2px solid #fff"

});