How to use border-radius attribute

How to use the border-radius attribute: First create an HTML sample file; then create a div in the body; finally set the style of the div to "border-radius:45px;".

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

border-radius attributeis a border attribute that can be used to set the border rounded corners. So what is the specific usage of the border-radius attribute? This article will introduce to you the specific usage of the border-radius attribute. Let’s look at the specific content below.

When we usually look at the border-radius attribute, we will see its syntax as follows

　border-radius: 1-4 length|% / 1-4 length|%;

Many people may not know what this means, but in fact it isborder-radius# The complete writing method of ##, we usually write, border-radius:20px;, the complete writing method should be: border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;, where the first four 20px represent the horizontal radius, and the following The four values represent the vertical radius. We draw ellipses or circles by setting the horizontal radius and vertical radius. We can also draw some other curved graphics.

border-radius attribute

Set a rounded border or a circle

Rounded border

Circular

can be set with radian The other graphics

The above is the detailed content of How to use border-radius attribute. For more information, please follow other related articles on the PHP Chinese website!