CSS Reference Data Type

<angle>

The <angle> CSS data type represents an angular dimension or an angle.

It consists of a <number> followed by an angular unit (deg, rad, grad, turn). The number is immediately followed by the unit, i.e. no white space is allowed between them, and the length units are case-insensitive.

An angle is used to represent circular dimensions. Each angle value can be represented on the circle by a “slice” of that circle.

slice

Image Showing What A Slice on A Circle Looks like

Angles can be positive or negative depending on the direction of rotation on the circle. In CSS, a circle is similar to a clock: if you move clockwise, the angles have positive values, and if you move counterclockwise the values are negative.

Many CSS properties take <angle> values such as the CSS transform property, where the angle value could determine the amount by which an element is rotated. For example, transform: rotate(30deg). You can read more about transforming elements in the transform entry.

Trivia & Notes

With four possible CSS angle units, it may occur to one’s mind that maybe some units are specific to certain properties, but they’re not. The units have nothing to do with the properties; any angle value that can be expressed in degrees, for example, can also be expressed in radians, gradians, or turns.

There is no restriction on which units can be used where. If a property accepts a value in deg it also accepts a value in radians or turns.

Values

deg
deg represents an angle in degrees. Degrees range from 0 to 360deg, with those two being equal. A full circle is 360deg, half a circle is 180deg, and half a circle in the counterclockwise direction is -180deg. Angles represented in degrees can have any value between 0 and 360. For example: 30deg, 45deg, -135deg.
grad
grad represents an angle in gradians. Gradians range from 0 to 400grad, with those two being equal. A full circle is 400grad, half a circle is 200grad, and half a circle in the counterclockwise direction is -200grad. Angles represented in gradians can have any value between 0 and 400. For example: 100grad (quarter of a circle), 150grad, -300grad.
rad
rad represents an angle in radians. Radians range from 0 to 2πrad, with those two being equal. An angle of 1 radian on a circumference of a circle creates an arc with an equal length to the radius of the circle. A full circle is 2πrad, half a circle is πrad, and half a circle in the counterclockwise direction is -πrad. Angles represented in radians can have any value between 0 and 2π.
One radian is approximately equal to 180/π degrees, or 57.2958 degrees. The general formula for converting from degrees to radians is to simply multiply the number of degree by π /180. The general formula for converting from radians to degrees to simply multiply the number by 180/(π).

Examples for using radian: 0rad, 2.3309rad, 5.93505rad.

turn
turn represents an angle in turns. Turns are new in CSS3, and a turn means a rotation. A full circle is 1 turn. One turn is equivalent to 360 degrees, and so 720deg is equal to 2turn. Angles represented in turn can have any value between 0 and 1. For example: 0.3turn, 0.95turn, -0.22turn. Note that turn is singular, so even for more than 1 turn, you’d still write 2turn and not 2turns.

Examples

The following image shows the position of some angles on a circle. Clockwise means positive and counterclockwise means negative.

circle

Angles in different units on a circle

Browser Support

The entire set of angle values is supported in Chrome, Firefox, IE9+, and Safari.

The turn unit is new in CSS3 and is currently only supported in Firefox13+ and IE9+.

Written by

Last updated December 11, 2016 at 9:58 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.