MW. MW. - 2 months ago 23
CSS Question

CSS calc() in border-width?

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

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.