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:

css video tutorial

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!