Home  >  Article  >  Web Front-end  >  How to make div round with css

How to make div round with css

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-07-23 14:21:006663browse

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.

How to make div round with css

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:

How to make div round with css

##Recommended learning:

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn