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
- yuliaOriginal
- 2018-09-07 13:53:403698browse
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;}Rendering:
div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}Rendering:
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:
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!