CSS calc() in border-width?

html css css-calc
MW. picture MW. · Apr 24, 2014 · Viewed 7.2k times · Source

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

Paulie_D picture Paulie_D · Apr 24, 2014

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.

Related questions

CSS Calc Viewport Units Workaround?

From what I've seen in other answers, CSS viewport units can't be used in calc() statements yet. What I would like to achieve is the following statement: height: calc(100vh - 75vw) Is there some workaround way I can achieve …

Read More
"width: calc(100% / 3);" not working properly

I have a 3 column layout that should fill the whole screen so on my columns I am using: width: calc(100% / 3); So lets say for example my screen is 782px wide: 782 / 3 = 260.66̅ However the problem I have is in Internet Explorer, where …

Read More
Stuck between flex-end and space-between and margin

In a flexbox, when I use justify-content:space-between the first and last items are exactly aligned to the bounds of flex container where space is divided between them. How can I align first item to the right where other items …

Read More