How to use border-radius in CSS3? Example to explain how to draw a circle using border-radius-CSS Tutorial-php.cn

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

yulia

Release： 2018-09-07 13:53:40

Original

3716 people have browsed it

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;}

Copy after login

Rendering:

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

Example 2: Give two values

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

Copy after login

Rendering:

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

##Example 3: Give three values

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

Copy after login

Rendering:

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

Example 4: Give four values

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

Copy after login

Rendering:

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

Example: Use border-radius to make a circle

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 200px;height: 200px;background: beige;text-align:
center;line-height: 200px;font-size: 50px;}
   .a2{width: 200px;height: 200px;background: pink;border-radius:
50%;}
  </style>
 </head>
 <body>
  <div class="a1">
   <div class="a2">HELLO</div>
  </div>
 </body>
</html>

Copy after login

Rendering:

The above is a detailed introduction to the rounded corners. Beginners can try and practice more!

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!