Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to write border-radius in less without dividing result

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

like image 840
RulerNature Avatar asked May 08 '15 13:05

RulerNature


2 Answers

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

like image 97
Stewartside Avatar answered Oct 28 '22 17:10

Stewartside


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

like image 34
Rahul Tripathi Avatar answered Oct 28 '22 17:10

Rahul Tripathi