Home > Article > Web Front-end > How to draw a circle in css
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 : Recommended learning:
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!