W3.CSSLesson 41Free preview

W3.CSS Round

This lesson is part of W3.CSS · All levels

Summary

The Round page discusses how to round the angle of the element to make it look softer and more modern. W3.CSS provides a class .w3-round with a larger radius variant, as well as .w3-circle to make perfectly circular images. Behind those classes is a standard CSS property called border-radius.

Key points

The property border-radius sets a large curved angle of an element
The P0 gives a small radius, while the larger variation adds curvature (.w3-round)
.w3-circle make a full-circle picture or box
The radius of 100% on a square of equal length produces a circle
Turn the corner of an interactive element like a button to look friendly

Full lesson

Code examples and quizzes

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