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.