CSS sqrt() Function
Example
Use sqrt() within the calc() function to set the width and height of three <div> elements:
div.a {
width: calc(50px * sqrt(16)); /* 200px */
height:
calc(50px * sqrt(9)); /* 150px */
background-color: salmon;
margin-bottom: 25px;
}
div.b {
width: calc(20px * sqrt(16));
/* 80px */
height: calc(20px * sqrt(9)); /* 60px */
background-color: green;
margin-bottom: 25px;
}
div.c {
width: calc(60px * sqrt(16)); /* 240px */
height: calc(60px * sqrt(9));
/* 180px */
background-color: maroon;
}
Try it Yourself »
Definition and Usage
The CSS sqrt() function returns the square
root of a number.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| sqrt() | 120 | 120 | 118 | 15.4 | 106 |
CSS Syntax
sqrt(x)
| Value | Description |
|---|---|
| x | Required. A number greater than or equal to 0 |
Related Pages
CSS reference: CSS acos() function.
CSS reference: CSS asin() function.
CSS reference: CSS atan() function.
CSS reference: CSS atan2() function.
CSS reference: CSS calc() function.
CSS reference: CSS cos() function.
CSS reference: CSS exp() function.
CSS reference: CSS hypot() function.
CSS reference: CSS log() function.
CSS reference: CSS mod() function.
CSS reference: CSS sin() function.
CSS reference: CSS tan() function.
