Skip to Content
Learn
The Box Model
Border Radius

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.

You can modify the corners of an element’s border box 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 a radius of 5 pixels would have).

You can create a border that is a perfect circle by first creating an element with the same width and height and then setting the radius equal to the distance between the center of the circle and the width of the box, which is 50%.

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

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

Instructions

1.

In style.css, set the border radius of #banner .content h1 to 15 pixels.

2.

Try experimenting with other border-radius values and running your code to see the result!

Folder Icon

Take this course for free

Already have an account?