CSS calc() in border-width?

Question

Can I use calc() 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 whatever reason, any value I provide with calc() results in no border at all. The documentation I've found on MDN aren't clear about whether calc can be used - it says that I should use Any <length> value , but does that include calc?

I target IE9, but I get the same results in Chrome 34 and Firefox 28. I know I can alsway use jQuery to achieve these things, but I want to avoid it if at all possible.

Answer 1

Unfortunately, border-width cannot use a % value as any % is NOT related to size of the element.

So, basically... NO you can't use calc WITH % for border-width because it doesn't know what it's supposed to be a % of.