Set style borderRadius for specific corners

Ask the community
,
1

To set the borderRadius of an element you do it like this:

 $w("#myElement").style.borderRadius = "1px";

All right, but in the editor you can set the radius of each 4 corners differently. While with code I can’t. I tried the following code on an element with different radius for each corner:

 let borderRadius = $w("#myElement").style.borderRadius; // returned "10px 20px 50px 5px"

It returned for each corner the radius. But why doesn’t it work when I try to set an element’s border radius to that value?

2

Hello,

One way to accomplish this would be to access the html of the element and add inline styling to it.

const exampleStyle = 'style="border: 2px solid blue; padding: 10px; border-radius: 50px 20px;"';                 //Example of border styling

//get the html, find out what you need to replace for it to work 
 console.log($w("#myElement").html);  
 
//Insert into the html inline styling with your example style(check link below)

I would recommend finding the index of which you have to insert the inline styling and input the exampleStyle there.

Here is an example of how to insert a string into a specified index.
Here if you want to read more about inline styling.

If you run into any trouble post your code here so we can debug it together,

Goodluck,
Majd

3

Hi,

I didn’t tell this but I’m using a button to do this and you can’t change the HTML of a button with Wix Code.
Is there another way?

Thanks for the reply,
PPTGames

4

Need same but there is not such a feature because they didn’t answer.

5

I’m trying to make my shop have circle images instead of square, I’ve added in the code:

$w ( “#gridGallery1” ). style . borderRadius = “100px” ;

But when I hit preview I get the following error:

TypeError: Cannot set property ‘borderRadius’ of undefined

6

Gallery elements don’t have a style property. Learn more at the Wix Velo documentation .

7

Is this possible in borderWidth, I want border bottom style, but it is not working