Home  >  Article  >  Web Front-end  >  How to use border-radius in CSS3? Example to explain how to draw a circle using border-radius

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

yulia
yuliaOriginal
2018-09-07 13:53:403692browse

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:

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

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

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

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>

Rendering:

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn