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 setting the radius equal to the height of the box, or to 100%. The code in the example above creates a <div> that is a perfect circle.
Post a Comment