CSS calc () in border-width?

Question

Can calc () be used with border width?

I would like the following CSS to work:

.my-element { border-left-width: calc(10% + 10px); border-right-width: calc(10% + 20px); } 

But for some reason, any value that I provide with calc() does not result in no border. The documentation I found in MDN is unclear whether calc can be used: it says I should use Any <length> value , but which include calc?

I am targeting IE9, but getting the same results in Chrome 34 and Firefox 28. I know that I can use jQuery to achieve these goals, but I want to avoid this if at all possible.

Answer 1

Unfortunately, border-width cannot use the value%, since any% does NOT refer to the size of the element.

So, basically ... NO, you cannot use calc WITH% for border-width because it does not know that it should be% off.