How to use border-radius in CSS3? Example to explain how to draw a circle using border-radius

In CSS3, border-radius is used to achieve the effect of rounded corners. Its usage is introduced in detail below. Finally, an example is used to explain how to use border-radius to draw a circle.

The border-radius property is a shorthand property used to set the four border-*-radius properties.
Note: If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper right corner is omitted, the upper left corner is the same. Its value can be a length value or a hundred percent.
When four values are given, they are the upper left corner, the upper right corner, the lower right corner, and the lower left corner. That is, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
When three values are given, they represent the upper left corner, (upper right corner , lower left corner), lower right corner
When two values are given, it represents (upper left corner, lower right corner), (upper right corner, lower left corner) respectively
When one value is given, it represents the same effect in the four corners

Example 1: Give a value

div{width: 150px;height: 150px;border-radius: 15%;background: red;}

Rendering:

Example 2: Give two values

div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}

Rendering:

div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}

div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}

Example: Use border-radius to make a circle

      
  
 
HELLO
 
  

The above is the detailed content of How to use border-radius in CSS3? Example to explain how to draw a circle using border-radius. For more information, please follow other related articles on the PHP Chinese website!