Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Learn

Ever since we revealed the borders of boxes, you may have noticed that the borders highlight the true shape of an element's box: square. Thanks to CSS, a border doesn't have to be square.

The corners of an element's border box can be modified with the border-radius property.

div.container { border: 3px solid rgb(22, 77, 100); border-radius: 5px; }

The code in the example above will set all four corners of the border to a radius of 5 pixels (i.e. the same curvature that a circle with radius 5 pixels would have).

You can create a border that is a perfect circle by setting the radius equal to the height of the box, or to 100%.

div.container { height: 60px; width: 60px; border: 3px solid rgb(22, 77, 100); border-radius: 100%; }

The code in the example above creates a div that is a perfect circle.

Report a Bug
If you see a bug or any other issue with this page, please report it here.