Less.js: border-radius not parsing correctly

Created on 6 Feb 2020 · 3Comments · Source: less/less.js

if the border-radius has a / in it, then it looks like less thinks it's division...

to reproduce:

.border-radius {
  border-radius: 34px 0 0 36px / 34px 0 0 36px;
  border-radius: 10px 100px / 120px;
}

produces:

.border-radius {
  border-radius: 34px 0 0 1.05882353px 0 0 36px;
  border-radius: 10px 0.83333333px;
}

... which is incorrect. you can see this is valid syntax here:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Source

heavyk

👍2

Most helpful comment

This issue can be seen in this test case that I created. View the compiled CSS to see how LESS renders it.

@heavyk and for anyone else stumbling in to this, note that you can escape characters in LESS, which is a handy tool for getting around parsing issues. This is also shown in my test case.

Instead of writing...
border-radius: 10px 100px / 120px;

write
border-radius: 10px 100px ~"/" 120px;

in your LESS and it should parse it correctly, leaving the / character alone and not interpret it as a character indicating a division is to take place.

kbav on 18 Feb 2020

👍2

All 3 comments

This issue can be seen in this test case that I created. View the compiled CSS to see how LESS renders it.

@heavyk and for anyone else stumbling in to this, note that you can escape characters in LESS, which is a handy tool for getting around parsing issues. This is also shown in my test case.

Instead of writing...
border-radius: 10px 100px / 120px;

write
border-radius: 10px 100px ~"/" 120px;

in your LESS and it should parse it correctly, leaving the / character alone and not interpret it as a character indicating a division is to take place.

kbav on 18 Feb 2020

👍2

ah cool, knowing how to escape it is helpful, thanks!

heavyk on 24 Feb 2020

Closing as this has several workarounds. The other is to change the math mode as in http://lesscss.org/usage/#less-options-math