CSS Visual ToolsLesson 75Free preview

Border Radius

This lesson is part of Web Developer Tools · All levels

Summary

The Border Radius generator helps set the angles of rotation on the element with a direct preview. You can use one value for all angles, four separate values, or the syntax slash for horizontal and vertical radii. The results are often used for cards, buttons, avatars, and profile pictures.

Key points

One value of the border-radius rounding the four corners is equal to the
Four numbers in the order of upper left, upper right, lower right, lower left.
A value of 50% on a square element produces a circle
Slash separates the horizontal and vertical radius
Overflow: hidden required for the child's content to follow a rounded angle

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.