rad
Radians: a full turn is 2π, about 6.283rad.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 2+ |
| Chrome Android | 18+ |
| Edge | 12+ |
| Firefox | 3.6+ |
| Firefox Android | 4+ |
| Safari | 4+ |
| Safari iOS | 3.2+ |
Formula 2π rad = 360deg = 1turn
How it works
A radian is the angle at which the arc along a circle’s edge is as long as its radius. A full circle holds 2π of them, about 6.2832, and 1rad is about 57.2958deg. CSS has the constants pi and e for exactly this arithmetic, so calc(pi * 1rad) is a half turn and renders the same as 180deg.
The unit belongs to the trigonometric functions. sin(), cos() and tan() accept an angle or a plain number, and a plain number is read as radians. So sin(1) and sin(1rad) agree, and sin(90deg) is 1 while sin(90) is about 0.894.
Use rad when the angle comes out of a formula, for example a point on a circle at cos(var(--angle)). For angles somebody types by hand, deg or turn read better, and CSS converts between them.
Try it
Convert angles, time and resolution
Pick a unit and a value. The other units of the same kind are shown, and an angle turns the square.
deg- 90
grad- 100
rad- 1.5708
turn- 0.25
Your screen:
The same as a table
| Kind | Equal to |
|---|---|
| A right angle | 0.25turn, 90deg, 100grad, 1.5708rad |
| A duration | 1s, 1000ms |
| A resolution | 1dppx, 1x, 96dpi, 37.795dpcm |
Reach for it when
Angles computed in JavaScript with Math.sin and friends, or inside CSS trigonometry.
Watch out
CSS trigonometric functions read a plain number as radians: sin(1) means one radian, and sin(90deg) is the one that equals 1.
.needle {
rotate: 1.5708rad;
}