Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Foundations Variables Basics

Posted by akhil maddu
akhil maddu
1,422 Points

can i use all css rules using javscript? when i used border-radius property it is not working.

a

Zachary Green
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

it should work can i see your code

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Akhil,

You can absolutely get and set an element's border radius using JavaScript.

Since "style" in JavaScript (aka CSS of an element) is what's known as a "method" there are a couple ways to call it.

Let's look at some ways to do that:

var element = document.getElementById("insertIDhere");

//Set each individual corner's radius
element.style['border-top-left-radius'] = '4px';
element.style['border-top-right-radius'] = '4px';
element.style['border-bottom-left-radius'] = '2px';
element.style['border-bottom-left-radius'] = '2px';

//Or use this variation
element.style.borderTopLeftRadius = '4px';
element.style.borderTopRightRadius = '4px';
element.style.borderBottomLeftRadius = '2px';
element.style.borderBottomRightRadius = '2px';

//Or use the shorthand border-radius property to set all 4 in one declaration
element.style['border-radius'] = '4px, 2px';

//Or set the shorthand camel case to set all 4 via the dot notation
element.style.borderRadius = '4px, 2px';

There are even more ways to get and set the border-radius property, but these are the easiest. I personally prefer the [] notation of calling the properties because they look exactly the same as the CSS properties themselves instead of being camel cased like the dot notation. But it is up to you.

I hope that clears that up!