Home > Article > Web Front-end > How to draw a circle in css
How to draw a circle in css
- 醉折花枝作酒筹Original
- 2021-04-20 18:06:3410140browse
How to draw a circle in css: first set the width and height of the div element to be equal; then use the border-radius attribute to draw a circle, the syntax format is "border-radius:50%". The border-radius property sets the rounded corners of the element's outer border, which determines a circle when using a radius.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
The border-radius property is a shorthand property used to set the four border-*-radius properties.
Tip: This attribute allows you to add rounded borders to elements!
Note: Set the four values of each radii in this order. If bottom-left is omitted, it is the same as top-right. If bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left.
Before setting:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid rgb(255, 113, 113);
}
</style>
</head>
<body>
<div></div>
</body>
</html>Effect:
border-radius: 50%;Effect :
The above is the detailed content of How to draw a circle in css. For more information, please follow other related articles on the PHP Chinese website!