Home > Article > Web Front-end > How to make div round with css
In CSS, you can use the border-radius attribute to set a div to be round. You only need to add the "border-radius:50%" style to the div element. This property allows you to add rounded borders to the element. The radius of the rounded corners cannot exceed half the width/height.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
The rounded corner border can use percentage as the unit. For example, if the rounded corner border of a square is set to 50%, a circle will be formed. However, using percentages and pixels is not equivalent.
Note: After the percentage is greater than 50%, the shape will no longer change, and the radius of the fillet cannot exceed half of the width/height
Example:
css part:
.box1{ width:200px; height:200px; margin: 30px auto; border: 2px solid #e4007e; text-align: center; line-height: 200px; font-weight: bold; font-size: 24px; background: burlywood; border-radius: 50%;//圆角百分比 }
html part:
<div class="box1">这是一个圆</div>
The effect is as shown:
##Recommended learning:The above is the detailed content of How to make div round with css. For more information, please follow other related articles on the PHP Chinese website!