How can I write this css into less:
border-radius: 10px / 20px;
normally css interpret something like :
border-bottom-left-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-top-left-radius: 10px 20px;
border-top-right-radius: 10px 20px;
but less compilers are dividing 10px/20px = 0.5px
This could be due to not having strict maths turned on in the compiler which tells it to only run maths within parenthesis.
An alternative is to trick the system into thinking its a normal string instead of a calculation.
border-radius: 10px ~"/" 20px;
Codepen Example
You can wrap the entire in ~"..."
like
border-radius: ~"10px / 20px";
or you can use
border-radius: e("10px / 20px");
You can refer string unquoting
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With