Using calc() calculate values in css

CSS3 required

calc() function is a good feature of CSS. For arithmetic calculations in CSS it is used. You can use it for percentages and pixels also. In IE9 towards it works also.

This is a native CSS way for doing simple math in CSS which is a replacement for any length value. It has four simple math operators i.e. add (+), subtract (-), multiply (*), and divide (/). It is quite interesting to calculate value in CSS rather than doing math in code.

Read Also: Apply CSS to half of a character

On desktop it supports on IE 9+, Safari 6+, and won’t be in Opera until it is on present in 15+ atleast. On mobile, it supports on Android and Opera Mini don’t support it at all yet and iOS just on 6.0+.


<div class="divc">
    <p>This div has 10px on either side.</p>
    width: calc(100% - 20px);
    margin: 0 auto;
    padding:25px 0;

For more details click here.

Perhaps you could even use this to do a fancy things with the <progress> elements like turning it into a speedometer like.

One thought on “Using calc() calculate values in css”

Leave a Reply

Your email address will not be published. Required fields are marked *