14

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.

dippas
  • 58,591
  • 15
  • 114
  • 126
MW.
  • 12,550
  • 9
  • 36
  • 65
  • 2
    `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. – Paulie_D Apr 24 '14 at 09:00
  • @Paulie_D: Right, it turns out I can actually use calc(1em + 5px), for example. If you give that comment as an answer, I can mark it as the solution. – MW. Apr 24 '14 at 09:24

1 Answers1

11

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.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • 5
    I tried using it with 'vw' unit, which is based on percentage of viewport width. The viewport width is relative to the window, and it does not change relative to different elements in the DOM. This doesn't work here either! What's going on here? – Steven Linn Feb 12 '15 at 21:00
  • @StevenLinn you ever find an answer to this? – oldboy Aug 05 '23 at 07:12