How to use Border-radius in CSS3? Examples of Border-radius draw a circle with a

CSS3 in Border-radius used to achieve the effect of rounded corners, the following details its usage, and finally with an example to explain how to draw a circle with Border-radius.

The Border-radius property is a shorthand property for setting four Border-*-radius properties.
Note: If you omit the lower-left corner, the upper-right corner is the same. If you omit the lower-right corner, the upper-left corner is the same. If you omit the upper-right corner, the upper-left corner is the same. Its value can be a length value, or it can be hundred percent.
When four values are given, the upper-left corner, the upper-right corner, the lower-right corner, the lower-left corner, respectively. namely Border-top-left-radius, Border-top-right-radius, Border-bottom-right-radius, Border-bottom-left-radius
When given three values, represent the upper left corner, (upper right corner, lower left corner), lower right corner
When two values are given, respectively (upper-left corner, lower-right corner), (upper-right corner, lower-left corner)
An effect that represents four corners when given a value

Example 1: Give a value

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

：

Example 2: Give two values

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

：

Example 3: Give three values

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

：

Example 4: Give four values

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

：

Example: Make a circle with Border-radius

<! DOCTYPE html>
：


The above is a detailed introduction to the fillet, beginners can try to practice more!