Join the Webstudio community

Updated 3 months ago

How to make custom shapes with border-radius?

At a glance

The community member has found a YouTube tutorial on creating custom shapes using the border-radius property, where they can use values like 34% / 73%. However, when they try this in their Webstudio, it doesn't work as expected. The community members discuss a solution, where they discover that the full border-radius value needs to be used, such as border-radius: 44% 56% 70% 30% / 56% 48% 52% 44%. They also mention that this is a shorthand property that expands to the individual values. The community members suggest creating a short video to showcase this feature, as they were unaware of its existence.

Useful resources
I've found this YT tutorial about making custom shapes with border-radius where they can do this 34% / 73% thing. Obviously when I do that in Webstudio, it divides.

Is there any trick to create a similar effect here?
O
B
R
14 comments
Can you paste into advanced section?
Not sure which property I need in advanced. Can't find just border-radius, but something like border-end-end-radius
Ahh without the slash, got it! Thank you very much 😁
when creating border radius, use that full value and hit enter
border-radius: 44% 56% 70% 30% / 56% 48% 52% 44%
I was searching for it, but I see I just need to apply it even though its not listed πŸ˜€
It's shorthand and expanded when you paste it
its not not listed, border-radius is a shorthand for those individual values it creates for you
We should make a short video about this, its a nice feature and I had no idea
I feel tempted to create that short video 😁
do it, will retweet on socials
This could be a nice thing to have builtin
Add a reply
Sign up and join the conversation on Discord